Archived topic

Unable to change font weight with Inter Google font

7 replies · Started by Gabriel on April 23, 2021

Viewing posts 1–8 of 8

April 23, 2021 at 7:07 am #1746098

Since Inter is not available in the Typography customizer I added the following snippet to enable it:

add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
    $fonts[ 'Inter' ] = array( 
        'name' => 'Inter',
	'category' => 'serif'
    );
    return $fonts;
}

While font itself is added changing font-weight to 300 does not have any affect. It does not matter if I change in customizer or F12.

If I add the same font with the Fonts Plugin and only configure system stack in the Typography customizer I can choose any weight, as expected with a variable font.

I have setup two plain GeneratePress installs with only Typography module enabled for reproducing the issue. Links are in Private information.

April 23, 2021 at 8:15 am #1746166

Hi there,

Can you try adding the variant as seen here?
https://docs.generatepress.com/article/customizing-the-google-font-list/#adding-your-google-font-to-the-list

April 23, 2021 at 8:21 am #1746186

Changed the snippet to the following:

add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
	$fonts[ 'inter' ] = array( 
		'name' => 'Inter',
		'variants' => array( '100', '200', '300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i' ),
		'category' => 'sans-serif'
	);
	
	return $fonts;
}

Then I got options in the Variants dropdown. I can select any font weight but it seems that only the weights that match a variation is working. Is that the expected behavior?

April 24, 2021 at 3:42 am #1746836

Hi there,

The Typography module is due for an update - it doesn't distinguish from Variable and regular fonts. So the Varients have to be loaded if they are intended for use. So what you're seeing is 'expected' behaviour - albeit not what you needed.

Will be addressing that when we update the Typography module which is high on our list of to do's

April 25, 2021 at 10:58 pm #1748863

Thanks. Then I know how to explain it to my team. Looking forward to the new Typography module.

April 26, 2021 at 2:53 am #1749163

You're welcome

June 30, 2021 at 3:31 am #1839522

Had exactly the same issue, but it's easy to solve, so for anyone else finding this thread. You can add weights for a variable font like this (I added this code to a WP_HOOK - HEADER element):

The key is adding :wght@300..900 (400..800 all weights from 400 to 800 || 400;800 just 400 and 800)

there's a great article here:
https://css-tricks.com/getting-the-most-out-of-variable-fonts-on-google-fonts/

As there's more you can do. But adding a font through customiser, and then this code to the /head - will at least make the font behave like a 'normal font'.

June 30, 2021 at 6:22 am #1839656

Thanks for sharing Mike!

This archived topic is closed to new replies.

Start building better websites today.