[Resolved] Issue with implementing custom font

[Radek]

Hi,

I have followed the guide but I was still unable to make the custom font work.

– I’ve uploaded web fonts into the child theme folder
– Added code into the CSS child theme
– Added PHP via snippet plugin

Could you, please, take a look to see if there’s something obvious I’m missing?

I’m attaching files and screenshots.

[David]

Hi there,

is it possible to see a page of the site where the fonts are not loading ?

[Radek]

Hi David,

We have coming soon page so not without login details – I’m attaching them.

I’ve tried to assign the fonts through the Customise interface as titles but the font is not displaying there.

Note: I’ve tried clear caches but it did not help to solve the problem.

[Elvin]

Hi there,

I’ve checked the stylesheet and seems to have issues. Some URLs had missing dots while some properties where wrong.

bold is a font-weight property, not font-style.

Font styles are normal, italic and oblique.

Font weights values are 100 to 900 with some values associated with ‘bold’, ‘thin’, ‘regular’ etc.

You’ll have to fix these things to make the importation work properly.

[Radek]

Thank you, Elvin,

I’ve did the adjustments as you suggested – the font is still not available in the Customise interface…

[Elvin]

I’ve did the adjustments as you suggested – the font is still not available in the Customise interface…

Ah right, this issue is due to your snippet being set “Only run on site front end”. Set it to “Run snippet everywhere” so it actually runs on the backend.

“Only run on site front end” is used for JS or CSS. PHP snippets should be run on the backend.

Alternatively, since you’re using a child theme. You can just add the snippet to its functions.php as specified here: https://docs.generatepress.com/article/adding-php/

[Radek]

Thank you, now I can see the font in the interface. Unfortunately, choosing the font and saving the settings does not propagate it into the frontend – Ubuntu is still in all titles (cache cleared before trying).

[Elvin]

You have this CSS within Appearance > Customize > Additional CSS:

h1, h2, h3, h4, h5, h6 {
    font-family: "Ubuntu", sans-serif !important;
}

This prevents any styling from the customizer to apply to your heading.

[Radek]

🤦 Thanks!

[Elvin]

If the font changes but it doesn’t seem to match how “Greycliff” looks, that usually means you still have to fix something within the @font-face{…}.

No problem. 🙂

[Radek]

So this is strange. When I put back

h1, h2, h3, h4, h5, h6 {
    font-family: "Greycliff", sans-serif !important;
}

to custom CSS the right font is displayed…any idea why?

[Radek]

Oh, ok I know. Custom 3rd party blocks rewrote the settings from Generate press.

Sorted, thank you!

[Elvin]

Nice one! Glad you got it sorted. 🙂

[Author]

Posts