[Resolved] Question about format on selfhosted fonts

[Sebastian]

Hello, am interested in self host my font (lato), so i followed the steps in the documentation adding local fonts, but before i downloaded the fonts i had to chose between:
Best Support and Modern Browsers

The difference is significant, the best support it’s 852 kb while the modern browser it’s 204 kb, so am thinking I would like the modern browser. I read and know that many old browser don’t support the woff, woff2 format, that’s why the best support includes many different formats.

Here are my questions:

1. If I host the best support (852 kb) does that mean that everyone that gets to my site has to download all the font files or just the one that they need?
2. if I only self host the modern formats (woff, woff2), what happens if a user enters the site with and old browser? does he sees the content with his own default font or what happens?
3. if a decide to host the modern format (woff, woff2), Can i make sure that if a user with an old browser gets to the site, he/she will see the content with his/her own default browser font?

Thanks for your time

cheers!

[Tom]

Hi there,

1. I believe the browser will only download the one it needs – you can double-check by watching the “Network” tab in your developer tools as the page loads.

2 + 3. The font will fallback to another font if specified in your CSS, or the browser default if one isn’t specified.

Hope this helps 🙂

[Sebastian]

Hello Tom, your answer helped a lot,

Just one more thing.

I have uploaded the modern version so I want to set the default browser’s font in old devices, From a speed point of view, should i add some code to set specify this or this let it as is is?

[Tom]

In your font-family CSS, you can specify a fallback:

font-family: 'My Self Hosted Font', Arial, Helvetica;

So if your self hosted font doesn’t load, it will fall back to Arial, then Helvetica and so on.

[Sebastian]

Hi Tom,

I tried the fallback, i put it like this:

/* lato-regular – latin */
@font-face {
font-family: ‘Lato’; -apple-system, system-UI, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;
font-style: normal;
font-weight: 400;
src: local(‘Lato Regular’), local(‘Lato-Regular’),

I’m having doubts about the ; after ‘Lato’ but if a put in like this: ont-family: ‘Lato’, -apple-system, system-UI, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;
The font in the customizer changes immediately to a bold font

[Tom]

It shouldn’t have the ;, your second example is correct.

If it’s turning bold, perhaps you’re only loading the bold variant of the Lato font?

[Sebastian]

Hi Tom

I Try with with the , but as soon as i did that, it changed back to serif, I check in webpagetest and the fonts are not loading, I’ll give you a few details to see if we can sort this out.

[Tom]

Any chance you can link me to the page?

[Sebastian]

Sure

[Tom]

In your function that adds the Lato font to the Customizer, can you make sure it matches the font-family you’ve added in the CSS?

For example:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Lato, -apple-system, system-UI, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';

    return $fonts;
} );

[Sebastian]

Hi Tom,

Sorry for this long problema, I appreciate your help.

I added the : add_filter( ‘generate_typography_default_fonts’, function( $fonts ) {
$fonts[] = ‘Lato, -apple-system, system-UI, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif’;

return $fonts;
} );

With code snippets, because mine only had the “lato” font. Since then am experiencing a problem, the lato font only charges in mobile devices, only on phones, in desktop browsers (chrome, edge, brave) only displays the same serif. I’ve tried on diferent computers, with cleared cache but the same applies.

I checked in webpagetest and the font are not loading

[David]

Hi there,

try setting the @fontface family like so:

font-family: Lato, -apple-system, system-UI, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

This removes the '' quotes from around the Lato font.

[Sebastian]

Hello, I tried taking away the quotes in the CSS, in it didn’t fix the problem, then i tried to remove them from the php in the snippet but I get this: Don’t Panic
The code snippet you are trying to save produced a fatal error on line 2:

syntax error, unexpected ‘,’
The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

So I don’t know what to do..

[David]

OK so actually what where trying to do is not possible.
@font-face can only specify a single font – it cannot include the fallback fonts.

And the current GP Typography function won’t allow you to declare the fall back fonts in the generate_typography_default_fonts filter which is what outputs the CSS required.

The only way around this would be to use CSS to specify the font-family for your various text elements.

I would suggest removing the fallback fonts from your list, so you just has Lato loading, and then we can take another look.

[Sebastian]

Hi Tom,

Thanks for making it clear, I thought I was going mad. So after this trouble I decided that I have to do the best support option with the many extensions (eot,woff,woff2,ttf,svg), so I follow the steps in this link Add local fonts, I have added the snippet: add_filter( ‘upload_mimes’, function( $mimes ) {
$mimes[‘woff’] = ‘application/x-font-woff’;
$mimes[‘woff2’] = ‘application/x-font-woff2’;
$mimes[‘ttf’] = ‘application/x-font-ttf’;
$mimes[‘svg’] = ‘image/svg+xml’;
$mimes[‘eot’] = ‘application/vnd.ms-fontobject’;

return $mimes;
} );

But when I try to upload the fonts y get this problem: “lato-v17-latin-italic.ttf” has failed to upload.
Sorry, this file type is not permitted for security reasons”
It only happens with the .ttf extension.

I checked in 2 websites and got the same problem, in both I added the snippet.

[Author]

Posts