[Resolved] Custom font issue for site made with GP and Elementor

[Michael]

Hi there

I have made a site using GP and Elementor, except for blog posts (these are made using Gutenberg).
So, if you head over to the blog post pasted below and open the menu on the top right, you can see that the custom font “LEMON MILK” is not applied.

I uploaded this custom font via FTP like I usually do, however, it will not get applied for blog posts (meaning content not made with Elementor).
Do you know what I am doing wrong here and how I can use the custom font for the menu as well for blog posts?

Thank you very much,
Michael

[Ying]

Hi Michael,

Can you point me to the Elementor content where the font is showing correctly so I can compare both?

Let me know!

[Michael]

Hi Ying

Thank you.
I have linked you a page below where you can see the menu with the correct custom font.

Best,
Michael

[Ying]

Hum..how did you add the custom font? Did you follow the guide here?
https://docs.generatepress.com/article/adding-local-fonts/

If so, can you show me the@font-face CSS you added?

[Michael]

This is the font-face I have added for the bold font type:

@font-face {
  font-family: "Lemon Milk", Sans-serif;
  font-style: normal;
  font-weight: bold;
  src: local(''),
       url('/wp-content/themes/.../webfonts/LEMONMILK-Bold.woff') format('woff'),
	  url('/wp-content/themes/.../webfonts/LEMONMILK-Bold.woff2') format('woff2');
}

Should be correct, right?

[Ying]

Usually, there will only be one font name in the @font-face CSS, so it should be font-family: "Lemon Milk";

Other than that, can you confirm the URLs are correct?

And how did you add the CSS?

[Michael]

Oh boy, removing the “Sans-serif” did the thing.
It is working now.

Great stuff, thank you so much Ying! Made my day.

[Ying]

You are welcome 🙂

Glad to help!

[Author]

Posts