[Resolved] Unable to change font weight with Inter Google font

[Gabriel]

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.

[Leo]

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

[Gabriel]

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?

[David]

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

[Gabriel]

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

[David]

You’re welcome

[Mike]

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):

<link rel=”preconnect” href=”https://fonts.googleapis.com”&gt;
<link rel=”preconnect” href=”https://fonts.gstatic.com&#8221; crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap” rel=”stylesheet”>

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’.

[David]

Thanks for sharing Mike!

[Author]

Posts