Custom font not loading on mobile

I added my css in private

It works on tablet but not on my mobile, strange

Hi there,

i am not seeing that font being loaded on any device.
If you got to any of the URLs you have set in your @font-face CSS they return a 404 not found page.
Check the URLs are correct.

Note: you may see fonts loading on devices that have the font stored locally.

Oups. I fixed this issue but the custom font still isn't loading on mobile...

Any idea?

OK so i am not seeing where any of those fonts are being applied.
If i change a font of an element eg. the H1 to "Equity Text A" then i see the font loading.
But i don't see anywhere in the site where that font has been selected ?

The "Equity" font is applied to the body text, on my side ; any device except mobile

Thats the issue i see - there is no @fontface CSS for Equity... if i change it to “Equity Text A” then the font works.

When you add the font to the customizer with this PHP:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Open Sans';

    return $fonts;
} );

The value here: $fonts[] = 'Open Sans'; must match that of the font-family name in the @font-face CSS.

Thanks a lot! It clarifies everything ^^

Do I also need to add "Equity Caps A" as in the following example:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Equity Text A, Equity Caps A';

return $fonts;
} );

THanks again

You would add all your fonts - but like so:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Equity Text A';
    $fonts[] = 'Equity Caps A';
    $fonts[] = 'Keep adding more of these for each font';
    return $fonts;
} );

Make sure those font names match your CSS though :)