[Resolved] Local font not rendering in editor

[Whelan]

In order to speed up load time, I used your documentation to add two Google fonts locally (https://docs.generatepress.com/article/adding-local-fonts/).

Unfortunately, now the local fonts don’t load in the editor… in Safari it reverts to Noto Serif and in Chrome it displays a different font-weight. It displays fine on the front-end – just not in the editor.

I have a few connected questions:

1. Why isn’t my specified local font loading in the editor? – despite being correctly specified in the wp-admin/post.php, see example:

   body.gutenberg-editor-page .block-editor-block-list__block, body .editor-styles-wrapper {
   font-family: "Montserrat";
   font-size: 17px;
   color: #414a4c;
   font-weight: 300;}

2. How can I specify a fall-back font (font stack) if I use the customiser to set the fonts? I can see it’s possible with Generateblocks, but I can’t find that feature in GP Premium Customiser.
3. Can I use code snippets to add a fallback font-stack to the editor css?

This is my setup:

• Fonts saved to /wp-content/fonts/ [woff & woff2]
• @font-face CSS added to Customiser (Additional CSS)
• Superfluous /* comments removed */
• PHP added via code snippets – “Run snippet everywhere”
• Server cache and browser cache cleared
• GP css cache cleared, files re-combined and external file regenerated.

What am I missing?

[David]

Hi there,

we recently been testing this plugin:

https://wordpress.org/plugins/host-webfonts-local/

Really does take the pain out of hosting fonts locally – and so far its been working great.

Maybe give that a shot

[Whelan]

Hello again. I’ve been using your suggestion (OMGF) on several GP Premium sites with mixed success. Currently, I’ve got a weird situation where the fonts are loading correctly in the editor, but not on the published pages.
I’ve disabled OMGF; GP css cache cleared, files re-combined and external file regenerated…

but ‘all.min.css’ is overriding ‘style.min.css’.

I want the font css to be determined by the GP Premium typography settings and Customizer > Additional CSS.

So please remind me: which css file is which? …and how can I get my settings to stick?

PS I have no rules in my child theme’s style.css file.

[David]

Can you share a link to the site so i can see whats going on?

[Whelan]

The test site is: https://staging.cingularity.tv. (I want OMGF to manage local fonts).

and the live site is: https://cingularity.tv (for comparison – fonts are loading the standard way via fonts.gstatic.com).

I have a Child theme but that’s proved to not be necessary because all style css is managed by Customizer > Additional CSS and Simple CSS on particular pages. Custom Functions and hooks are added via Code Snippets and GP Elements, and GenerateBlocks, WP ShowPosts and ACF deal with custom layouts and fields.

I’m trying to improve my pagespeed score by using OMGF and Clearfy.pro (Business) which includes minification and cache. On other sites I’ve used Litespeed or Autoptimize but they’re not suitable for this webhost.

I think something went wrong with the order or combination of optimization settings. I will contact both plugin developers but I’d like confirmation from you about:

1. is this the correct ‘Critical CSS’ that should be prioritised / ignored by optimisation plugins?

themes/*/style.css, themes/*/style.min.css, */omgf-admin.css*

2. How can I specify a fall-back font (font stack) if I use the GP Premium Customiser > Typography?

3. In Customizer > General the settings are: “External file” and ‘combine css’. How do I reset this now that it’s got confused.

[David]

In the developers tools the CSS file that OMGF generates is 404ing – so something has gone amiss with either that URL or the creation of that CSS. The OMGF support should be able help fix that.

1. Yes, Its best to exclude any of the themes.css from the critical CSS and any global styles such as font loading.

2. You cannot at this time, as the GP typography doesn’t hand the font-display rule. The only way to do it is hosting them locally and including the font-display rule in your own CSS. Note: Fall back fonts can be a pain – and can lead to CLS ( FOUT ) issues if the font you’re using doesn’t have a similar structure to the System Font. Probably better to preload the font and take the hit up front – i believe OMGF has an option for preload.

3. You can simply change the options back to inline and ‘uncombined’ then clear any caches. When you re-enable them those files will be regenerated.

[Whelan]

Thanks for your reply.

Re. Q1
What is the filename and path of the Customizer > Additional CSS and GP Premium > Typography CSS when the general settings are: Dynamic CSS Print Method: ‘External’, combined css.

Is it ‘wp-content/uploads/generatepress/style.min.css’ ?

Re. Q2
I want to specify fallback fonts precisely because the plugins are not currently working properly so the browser’s ‘fallback’ has very different dimensions, having the same effect as CLS… it’s shifting my intended layout.

Re. Q3
I’ve cleared all caches I can think of, but the Google fonts are still not loading. How do I flush cached dynamic css generated by GP?

[Elvin]

Hi there,

Q1:
It’s this one:
<link rel="stylesheet" id="generatepress-dynamic-css" href="//yoursite.net/wp-content/uploads/generatepress/style.min.css?ver=1614827412" media="all">

Yes that’s correct.

Q2:
You need to identify which elements are having issues and write your own CSS for font fallbacks.

You may find this discussion useful:
https://generatepress.com/forums/topic/specifying-a-fallback-font-for-locally-added-fonts/

Q3: You can regenerate the CSS so it renews it on Appearance > Customize > General. 🙂

[Whelan]

Thanks Elvin.

Q1. Presumably the version suffix changes (?ver=1614827412)… so in the Clearfy Optimisation plugin, where I specify critical css files, do you think these wildcard asterisks should work? */style.min.css*

Q3. What order should I reset GP css, i.e. 1. regenerate, 2. combine, 3. cache?

PS I notice GP Blocks has its own Regenerate CSS settings. Presumably I would need to regenerate that too after I try to optimise css via a plugin and it doesn’t work as expected.

[Elvin]

Q1. Yes it changes everytime you regenerate it.

I’m not sure how well clearfy plugin’s functionalities work. Consider asking their support for the best practice in doing wildcards for this. 🙂

Q3. Yes you’d want to regenerate it first before you combine to make sure the latest version of your CSS settings is the one being merged with all the other CSS before it gets cached. 🙂

PS I notice GP Blocks has its own Regenerate CSS settings. Presumably I would need to regenerate that too after I try to optimise css via a plugin and it doesn’t work as expected.

Yes, and everything else that has a similar setting.

[Whelan]

OK, so I’ve cleared everything and deleted the optimisation plugin and OMGF plugin. I just want local fonts, a web-safe fallback and combined css to speed up the site… but I have one remaining problem with a specific font weight.

Please help me identify the remaining problem.

Why is the 900 font weight not rendering, despite the fonts being uploaded to the server and @font face declared in several places: Customizer > Typography + theme style.css + simple css + additional css (I only want to declare it one place, I’ve just temporarily put it in multiple places to try and force it to work).

For comparison:
This test page shows my settings and the problem with font weight 900: https://staging.cingularity.tv/testing-local-fonts/ (I want to use local fonts in a system stack plus integration with Generateblocks ).

Compare with the live site: https://cingularity.tv (fonts are correctly loading the standard way via fonts.gstatic.com and there is no combined css, so it is slow).

Can you see the problem?

[David]

Are you using any plugins or custom functions that changes the loading order of certain CSS files – currently the dynamic CSS the customizer is being loaded before anything else… which is not normal and causing the issue.

[Whelan]

Yes, I’ve discovered that the way I was using the Clearfy plugin requires all css files to be declared in their “critical css” field – in ascending order of importance. Thanks for your help in pinpointing the issue – resolved.

[David]

Glad to hear that!

[Elvis]

Hmm,
I have been following the Local Typography tutorial and it works perfect on the front. (I have my fonts in the /childtheme/assets/fonts though, but works like a charm). But editor cannot load this. I had to:

/**
 * Enqueue google fonts for the editor
 */

function apuri_googlefonts_for_editor() {
 wp_enqueue_style( 'gfont_css', 'https://fonts.googleapis.com/css2?family=Work+Sans&display=swap', [], wp_get_theme()->version, 'all' ); 

 add_filter( 'style_loader_tag', 'data_gfont_css', 10, 3 );
 function data_gfont_css( $tag, $handle, $src ) {
  if( $handle === 'gfont_css' ) {
   $tag = str_replace(
    "<link rel='stylesheet'",
    "<link href='https://fonts.gstatic.com'>" . PHP_EOL . "<link rel='stylesheet'",
    $tag
   );
  }
 return $tag;
 }
}
add_action( 'enqueue_block_editor_assets', 'apuri_googlefonts_for_editor' );

/**
 * Force google font on editor
 */

function apuri_inject_css_in_admin() {
 if ( get_current_screen()->is_block_editor() )?>
  <style>
   .editor-styles-wrapper { font-family:'Work Sans', sans-serif !important }
  </style>
 <?php }
add_action( 'admin_head', 'apuri_inject_css_in_admin');

But it would be nice to get this to work in editor without having to do this.
Best

[Author]

Posts