[Resolved] Google Font Display In Safari

[Math]

Hi,

I’m currently using the Inter (Google font) on my website and it seems to be working for Chrome and Firefox, but not so much on Safari. Is this a theme issue or a browser compatibility issue?

https://ok.studio

Thank you.

[David]

Hi there,

how have you added the Inter font ? I am only see the 400 weight variant being loaded on the site, which is why the browsers render the 700 weight differently ie. Chrome and FF are creating a faux bold variant.

[Math]

Hi,

I put the following in functions.php and pulled the font-weight in the Typography menu within Customization.

add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
    $fonts[ 'Inter' ] = array( 
        'name' => 'Inter',
        'variants' => array( '400', '600', '800' ),
        'category' => 'sans-serif'
    );

    return $fonts;
}

[David]

Inter is a variable font which uses the CSS2 loading method from google fonts, which isn’t supported by the current GP Typography system.

If you want to load the variable fonts then hook this link into the wp_head:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800" rel="stylesheet">

Which will call the font with the 3 x weights you set embedded in the single font request.

[Math]

Ah ok. I wasn’t aware of it.

Now it works fine. Thank you!

[David]

Glad to hear that!

[Math]

Marked as resolved.

[Author]

Posts