[Resolved] Custom fonts not displayig

[Alex]

Hi team GP

I’ve been following your guide on adding custom fonts, have added the PHP snippet to allow the upload of font files and also the following @font-face code –

@font-face {
    font-family: 'GT Pressura-bold';
    src: url('https://dev-jameshfilm.xyz/wp-content/uploads/2019/05/GTPressura-Bold.woff2') format('woff2'),
        url('https://dev-jameshfilm.xyz/wp-content/themes/generatepress/fonts/GTPressura-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'GT Pressura-light';
    src: url('https://dev-jameshfilm.xyz/wp-content/uploads/2019/05/GTPressura-Light.woff2') format('woff2'),
        url('https://dev-jameshfilm.xyz/wp-content/uploads/2019/05/GTPressura-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'GT Pressura';
    src: url('https://dev-jameshfilm.xyz/wp-content/uploads/2019/05/GTPressura.woff2') format('woff2'),
        url('https://dev-jameshfilm.xyz/wp-content/uploads/2019/05/GTPressura.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Then added the php snippet for having it display in the customiser – but it’s not displaying anywhere, either on my site or in the customiser.

Any help gratefully received,

[Leo]

Hi there,

Where is the font being used?

I currently see <h1> as system stack and <h2> as Montserrat.

Let me know 🙂

[Alex]

Hi Leo,

I wanted to use it for the H1 & h2 but it’s not available in the typography selector on the customiser is that problem,

Have I followed the steps incorrectly?

thanks!

[David]

Hi there,

you need to complete this step to add them to the Customizer:

https://docs.generatepress.com/article/adding-local-fonts/#adding-it-to-the-customizer

[Alex]

Thank you David, that worked a treat!

[David]

Glad to hear that

[Anonymous]

Hi there!

I can’t for my life get my font to show up and I’ve installed it exactly as Alex above. In fact, we’re using a font (different style) from the same foundry so mine should work as well.

The font style I want for H1 is GT-Super-Display-Light.

I’ve inserted the @font-face code with the “https” url to my font directory (a subdirectory of my child theme). I’ve also inserted the JS snippet into the functions.php of my child theme.

CUSTOMIZER:
I’m seeing the font appear in the Customizer list as part of my system fonts, but using the customizer sliders to adjust the font size, weight, etc don’t work.

CHROME:
In Chrome, I can see the font is displaying in the “inspect” tool for H1, but it’s not actually displaying the correct font in the browser, it looks like it’s displaying an old google font I had chosen temporarily. It also doesn’t display the correct font on the editing and preview pages when I’m working on it in Elementor and my Elementor default font settings are disabled.

CACHE:
I don’t have any caching plugins, etc. installed or enabled so there should not be an issue with that.

I’ve never had this issue with adding custom fonts before so appreciate any assistance you can offer to get it working correctly. It’s also my first time using GeneratePress (so far so awesome and I love it but this is driving me a little bonkers).

I see there are some server issues and to be honest it confuses me because I’ve never had this issue before with fonts uploaded directly to a server so if you have any suggestions from experience I’d be thankful!

Thanks so much for the help guys!

[David]

Hi there,

would you be able to start a new topic where you can use the Site URL field provided to share a link to the site. Only we can see that link. Then one of us can take a look to see what the issue may be.

[Author]

Posts