Question about format on selfhosted fonts

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

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?

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.

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

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?

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.

Any chance you can link me to the page?

Sure

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;
} );

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

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.

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

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.

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.