[Resolved] Using local font – Anton – it displays incorrectly

[Danuta]

Hi there,

I wanted to speed up my blog, because I had some problems with Google Fonts. I use Anton font for headings (h1-h3) and Open Sans for main content.
Some time ago (one week or sth like that) I followed your istructions placed here: https://docs.generatepress.com/article/adding-local-fonts/

I added Anton font to my server, placed it in the child theme catalog (via FTP). Everything worked fine.

Yesterday there were some plugin updates I proceeded, and suddenly after that Anton is not showing for my headings anymore 🙁 It’s replaced by differet font. I have no problems with displaying Open Sans, only with Anton. I’ve checked it on two browsers on my PC, Chrome and Edge and additionally on my mobile phone (Chrome and Opera).

Maybe you could suggest, what’s wrong? There was an “Easy Google Fonts” plugin among the updates, but I didn’t use this plugin after I’ve put Anton on my server. So theoretically, it shouldn’t affect the display of this font, right? =_=

In my child theme header I pasted this code:

<link rel="preload" as="font" href="https://kobiecefinanse.pl/wp-content/themes/gpress_child/anton-v15-latin-regular.woff" type="font/woff2" crossorigin="anonymous">

In my functions.php (also in child theme) I pasted this code:

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

    return $fonts;
} );

And in Additional CSS:

/* anton-regular - latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://kobiecefinanse.pl/wp-content/themes/gpress_child/anton-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://kobiecefinanse.pl/wp-content/themes/gpress_child/anton-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://kobiecefinanse.pl/wp-content/themes/gpress_child/anton-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://kobiecefinanse.pl/wp-content/themes/gpress_child/anton-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://kobiecefinanse.pl/wp-content/themes/gpress_child/anton-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://kobiecefinanse.pl/wp-content/themes/gpress_child/anton-v15-latin-regular.svg#Anton') format('svg'); /* Legacy iOS */
}

And of course in Typography settings in the Customizer, font-family name within the System Fonts section is set to Anton for H1, H2 and H3.

I deleted cache and deactivated caching plugins (WP Super Cache and Autoptimize) but the problem remains.
I uploaded the font to the server again, it didn’t help.

Address of my blog: https://kobiecefinanse.pl

Thank you in advance for help!

[David]

Hi there,

i am not seeing the @font-face CSS loading on your site. If you installed the child theme after adding the CSS to Additional CSS then that CSS was saved in the Parent Theme and would need to be added to your child theme.
Try adding that to your Child Themes styles.css

[Danuta]

Whoah, that works, thank you! I additionally updated the font with latin-ext version because of polish characters 🙂

That’s interesting, because I’ve been using my child theme for several years now, and – as previously mentioned – at the beginning, after implementing the font locally, the headers displayed correctly. Or maybe it didn’t work from the very beginning, only the cached version of the blog was displayed to me… O_o Strange.

Once again: thank you very much for your support 🙂

[David]

Could have been the font being local and cached in the browser.

Glad to be of help!

[Danuta]

I made the same correction/entry for Open Sans font in the CSS child theme file. Everything works fine.

I’m closing the thread.

Thank you again! 🙂

[David]

You’re welcome!

[Author]

Posts