Local fonts not displaying

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

Hi Ying,

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

Ben

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+ */
}

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?

Hi there,

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

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

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

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

Yeah, of course.

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.

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

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

You're a superstar - solved it instantly. Thank you!

Awesome - glad to hear that!