Adding local fonts broke the fonts of the post editor

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 :)

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!

Hi there,

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

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?

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 :)

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!

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?

Yes, thats the file.

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

Can you share a link to the site ?

Sure!

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

Can you disable your cache plugin ?

I cleared the cache and now it works!

Thanks Tom and David, awesome support!

Glad to hear that!