[Resolved] OFT Font Problems

[Paul]

Hi There,

I wanting to add some a local font – I followed the instructions in the docs but not working for me. Any ideas on what I’m doing wrong?
Please see detail in private info.

Cheers
Paul

[Ying]

Hi there,

Our document for adding local fonts doesn’t include this PHP snippet anymore, as we’ve introduced the dynamic typography system to GP.

Please make sure you are following this documentation: https://docs.generatepress.com/article/adding-local-fonts/
The video should show it pretty straightforward.

Just checked your CSS, the URLs lead to the 404 page, they are not correct.

[Paul]

Thanks for info Ying – I fixed the issue with URLs and followed the video – although still can’t see the font in the customiser – any ideas on what I’ve done wrong?

[David]

Hi there,

in Customizer > Typography -> Font Manager -> Add New Font.
In the field provided paste in your font-family name as it is in your @font-face eg. HelveticaNowText
DO NOT set it to use the Google Font API.

Now when you Add Typography, you will be able to select your custom font.

[Paul]

Hi David,

I’d already done that I can see the font in the drop-down but doesn’t update the font.
Would you like admin access so you can view?

Cheers
Paul

[David]

Try converting the OTF fonts to .woff and .woff 2 files. As my browsers are refusing to load those OTF fonts.
The Font Squirrel site has a generator that can do that for you.

[Paul]

Thanks David I’ll give it a try!

[David]

Let us know how you get on!

[Paul]

Hi David,

I converted to .woff and uploaded via FTP and updated the CSS then updated customiser settings but still not working?

Any ideas?

CSS in private info.
Do I need to update this line?
src: local(”),

Cheers

[Ying]

I’m not seeing the @font-face CSS for Helvetica Now Text on your site, but I do see @font-face CSS for Robotofont.
How did you add it?

[Paul]

Hi Ying,

Thanks for looking into it. I added the CSS via the child theme (see attached screengrab) but doesn’t show in the code – any idea why?

As a test I added the below the CSS to the ‘Additional CSS’ in the customiser and now seeing in source BUT font still not displaying (gah!)

Do you know what I’m doing wrong?

Thanks

[Paul]

Morning David,

Any chance you could help with this one?

Cheers
Paul

[David]

Almost there –

change your @font-face to:

@font-face {
        font-family: 'HelveticaNowText';
        font-style: normal;
        font-weight: 400;
        src: local(''), url('https://the-zag-v6.instawp.xyz/wp-content/themes/Paul-Kelsall-Starter-Theme/fonts/helveticanowtext-regular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('https://the-zag-v6.instawp.xyz/wp-content/themes/Paul-Kelsall-Starter-Theme/fonts/helveticanowtext-regular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
        url('https://the-zag-v6.instawp.xyz/wp-content/themes/Paul-Kelsall-Starter-Theme/fonts/helveticanowtext-bold-webfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('https://the-zag-v6.instawp.xyz/wp-content/themes/Paul-Kelsall-Starter-Theme/fonts/helveticanowtext-bold-webfont.woff') format('woff'), /* Pretty Modern Browsers */
        url('https://the-zag-v6.instawp.xyz/wp-content/themes/Paul-Kelsall-Starter-Theme/fonts/helveticanowtext-regita-webfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('https://the-zag-v6.instawp.xyz/wp-content/themes/Paul-Kelsall-Starter-Theme/fonts/helveticanowtext-regita-webfont.woff') format('woff'); /* Pretty Modern Browsers */
}

Then your font name in the Customizer should be: HelveticaNowText

[Paul]

Awesome David – that’s working now! Much appreciated as always!

[David]

Glad to hear that!

[Author]

Posts