[Resolved] Adding local fonts broke the fonts of the post editor

[Giordano Berwanger]

I would like to add the font “Work Sans” on my server to improve the load times of the site, however after following the entire tutorial of the documentation, with the fonts working perfectly on the site, the fonts in the post editor simply broke.

This is the editor before I add the local sources.
https://i.imgur.com/TJmKWk8.png

And so it was after I added it.
https://i.imgur.com/itOe4b3.png

Any ideas on how to solve the problem?

[Tom]

Hi there,

The editor needs the @font-face CSS that you added to your front-end in order to load the fonts.

Did you add the @font-face CSS in a child theme style.css file, or via another method?

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Giordano Berwanger]

Hi Tom!
I had added the @font-face CSS in the Custom CSS section in Customizer.
Should I add this CSS only in the styles.css of the child theme or both?

Thanks for the help!

[David]

Hi there,

you will only add it to the Child Theme styles.css.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Giordano Berwanger]

Hi there!

I added @font-face only in Child Theme styles.css, but it doesn’t seem to be working.

This is a print of my styles.css file
https://i.imgur.com/n6tdfkE.png

What am i missing?

[Tom]

You now need to load that file in the editor.

For example:

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'THE URL TO YOUR CHILD THEME CSS FILE' );
} );

That should then load the fonts in the editor 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Giordano Berwanger]

Ok, now the fonts in editor works like a charm.

But when i remove the @font-face from the customizer, fonts in the website is not loading anymore. How can i import the styles.css from my child theme to work on the website too?

Thanks!

[Tom]

The child theme style.css file should load automatically on your frontend.

Is it named style.css in the root folder of your child theme?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Giordano Berwanger]

Yes, thats the file.

But apparently it’s not loading on the frontend, it’s only loading fonts when logged in.

[David]

Can you share a link to the site ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Giordano Berwanger]

Sure!

From what I identified, the problem is in the style.css file, which is loaded only when I am logged in.

[David]

Can you disable your cache plugin ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Giordano Berwanger]

I cleared the cache and now it works!

Thanks Tom and David, awesome support!

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts