[Resolved] Local font not rendering in editor

Home Forums Support [Resolved] Local font not rendering in editor

Home Forums Support Local font not rendering in editor

  • This topic has 13 replies, 3 voices, and was last updated 7 months ago by David.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1450316
    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?

    #1450405
    David
    Staff
    Customer Support

    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

    #1679975
    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.

    #1680132
    David
    Staff
    Customer Support

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

    #1680452
    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.

    #1680530
    David
    Staff
    Customer Support

    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.

    #1680655
    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?

    #1681179
    Elvin
    Staff
    Customer Support

    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. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1682310
    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.

    #1682574
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1683396
    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?

    #1684295
    David
    Staff
    Customer Support

    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.

    #1699865
    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.

    #1699972
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.