[Resolved] Local/Custom Font not Rendering in Editor on Tablet or Mobile preview 🤔

[Kyle Van Deusen]

Hey folks!

I’ve uploaded a local font using the instructions found through GP. Works great.

I then used a script to enqueue the child theme CSS into the editor so I could SEE the custom font when I’m editing the page.

This is working fine on the DESKTOP preview — but the custom font does NOT show on the tablet or mobile preview in the editor (it is displaying properly on the front end though).

Is this a known behavior? Or have I done something wrong?

[Kyle Van Deusen]

Here’s the desktop editor with the RIGHT font: https://theadminbar.com/wp-content/uploads/2022/09/CleanShot-2022-09-27-at-05.57.38@2x.png

Here’s what it looks like on tablet: https://theadminbar.com/wp-content/uploads/2022/09/CleanShot-2022-09-27-at-05.57.50@2x.png

—

The script I’ve used to enqueue the child theme CSS is this:

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'ogal-theme-css', 'https://**REDACTED**/wp-content/themes/OGAL-2022/style.css' );
} );

*Note I redacted the URL, but I’ve double checked that it’s right in the code 😉

And here’s what I did for the font in my child theme CSS file:

@font-face {
  font-family: 'Addington';
  src: url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold.eot');
  src: url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold.eot?#iefix') format('embedded-opentype'),
       url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold.svg') format('svg'),
       url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold.ttf') format('truetype'),
       url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold.woff') format('woff'),
       url('https://**REDACTED**/wp-content/uploads/2022/09/AddingtonCF-ExtraBold-1.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

[Fernando]

Hi Kyle,

Can you provide the link to the page where we can find the example you shared in your screenshots?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Kyle Van Deusen]

Sure, adding it to the private info

[Ying]

Can you try this？

add_action( 'after_setup_theme', function() {
    add_editor_style( 'https://**REDACTED**/wp-content/themes/OGAL-2022/style.css' );
} );

[Kyle Van Deusen]

Wahoo! That fixed it! Thank you Ying!

Just to confirm, I’ll need both the original PHP I put in there AND the new one you gave me? Or are they doing the same thing?

[Ying]

I think you will only need the PHP I provided 🙂

[Kyle Van Deusen]

Thank you! 🙌

[Ying]

You are welcome 🙂

[Author]

Posts