[Resolved] Local fonts not displaying

[Ben]

Hi,

I’ve followed this article on using local fonts. I’m trying to display 2 fonts on my Staging site, and it’s not working. One is TTNormsPro for headings, and the other is Source Sans Pro for body copy.

[Ying]

Hi Ben,

Can you try using a full URL in your @font-face CSS?

The current link leads to a 404 page.

Let me know 🙂

[Ben]

Hi Ying,

Thanks for the quick response! Are you referring to @import url in the @font-face CSS?

Ben

[David]

Hi there,

when adding local fonts DO NOT select them from the list, instead enter the font-family name in the field below, eg. Source Sans Pro and make sure the Google Font toggle is disabled – otherwise GP will make the google font api request instead.

The other font is a custom font and you have this CSS:

@import url("//hello.myfonts.net/count/3c7913");

@font-face {
    font-family: 'TTNormsPro-Regular';
    src: url('webFonts/TTNormsPro-Regular/font.woff2') format('woff2'), url('webFonts/TTNormsPro-Regular/font.woff') format('woff');
}

@font-face {
    font-family: 'TTNormsPro-Bold';
    src: url('webFonts/TTNormsPro-Bold/font.woff2') format('woff2'), url('webFonts/TTNormsPro-Bold/font.woff') format('woff');
}

But i don’t know why you need the @import if the fonts are stored locally and being requested ( ie. delete the above ) by this @font-face CSS

@font-face {
    font-family: 'TTNormsPro-Bold';
    src: local('TTNormsPro-Bold'), local('TTNormsPro-Bold'), url('http://staging3.enrola.co.uk/wp-content/uploads/2020/11/TTNormsPro-Bold.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('http://staging3.enrola.co.uk/wp-content/uploads/2020/11/TTNormsPro-Bold.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

[Ben]

Hi,

Thanks for the previous support. I’ve recently followed your updated Local fonts article, as I wanted to update my Source Sans Pro file now it’s a Google font, and it seemed a lot simpler with the way you handle typography on Generatepress.

I’ve followed the guidance on there, but I can’t get Source Sans Pro to display unless it’s as a Google font. I can’t see what I’m doing wrong – can you help please?

[David]

Hi there,

are you using the new Dynamic Typography options in the theme ? See here:

https://docs.generatepress.com/article/dynamic-typography-overview/

[Ben]

Hi David,

Yes, that was I was trying. I’ve uploaded the fonts from the Google Helper site, added the following CSS via Simple CSS (my system wouldn’t allow True Type fonts so I excluded that line):

/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('http://staging3.enrola.co.uk/wp-content/uploads/2022/08/source-sans-pro-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('http://staging3.enrola.co.uk/wp-content/uploads/2022/08/source-sans-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://staging3.enrola.co.uk/wp-content/uploads/2022/08/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://staging3.enrola.co.uk/wp-content/uploads/2022/08/source-sans-pro-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('http://staging3.enrola.co.uk/wp-content/uploads/2022/08/source-sans-pro-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('http://staging3.enrola.co.uk/wp-content/uploads/2022/08/source-sans-pro-v21-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

I typed in Source Sans Pro as my new font in the Dynamic Typography section of Customise, and switched off Google font as the option. However, it doesn’t like it, and I can’t see what I’m doing wrong

[David]

Could i get temporary admin access to the site ?
you can share the details in the Private Information field.

[Ben]

Yeah, of course.

[David]

Aah, ok go to Customizer > Typography -> Font Manager:

https://www.screencast.com/t/4qvIPytYed

That first font has the Google font toggle enabled. Remove that.
We probably could do a better job here, as currently if you enable it for one font it will apply to ALL google fonts.

[Ben]

I’ve switched that setting off, and it still doesn’t appear to be working.

This is a quick video showing that it is working, but not universally…

[David]

Your urls in your @font-face are http they need to the be: https

[Ben]

You’re a superstar – solved it instantly. Thank you!

[David]

Awesome – glad to hear that!

[Author]

Posts