Archives

Home Forums Search Search Results for 'flash of unstyled text with google fonts'

Search Results for 'flash of unstyled text with google fonts'

Home Forums Search Search Results for 'flash of unstyled text with google fonts'

Viewing 6 results - 1 through 6 (of 6 total)
  • Author
    Search Results
  • #2140331
    Fernando
    Customer Support

    Hi Maria,

    It seems that you have font-display: swap. This means that the browser can load its own font while it waits for your selected font to load. Removing this property would stop this behavior.

    See: https://share.getcloudapp.com/ApuJBOB8

    “However, There is a weigh-off between having FOUT and having google flag: Ensure text remains visible during webfont load.

    The only way to have the best of both is to make sure the fonts load so quick that google doesn’t register that as a complaint. To achieve that can involve a lot of work, from really optimizing the site to actually optimizing each of the fonts by removing the charsets and characters you don’t require.”

    For reference: https://generatepress.com/forums/topic/fixing-a-flash-of-unstyled-text/#post-2040187

    Hope this clarifies. 🙂

    #2140325
    [Resolved]

    Topic: Can’t find solution to my FOUT issue

    in forum Support
    Maria

    I’m locally hosting Google fonts Oswald and Oxygen. I’m getting FOUT with Oswald. (Not sure why not with Oxygen). I’ve read through the forums and followed the instructions here: https://generatepress.com/forums/search/flash+of+unstyled+text+with+google+fonts/ but still having issues. I’m using SG Optimizer plugin. I turned off Combine CSS and that didn’t help. I’m wondering if I should edit the Exclude from CSS Combination, but I have no idea what to enter. Any help would be appreciated.

    #2050850
    David
    Staff
    Customer Support

    Personally i use PerfMatters to locally load and preload my fonts.
    You can do it manually but you will need to limit the preload to just the .woff2 which is the most widely supported font.

    To begin i would:

    1. review the number of local fonts you’re are loading – do you require all of the variants here:

    https://generatepress.com/forums/topic/fixing-a-flash-of-unstyled-text/#post-2038673

    ie, 300, 400, 600, 700, 800 and the italic versions

    Its best to load just the ones you’re using as this will make a big difference to the resource loading.

    Anyhow add the local fonts you do require. And disable any Google font options in the Customizer.

    2. Adding preload links:

    a) Create a new Hook element:

    https://docs.generatepress.com/article/hooks-element-overview/

    b) in the hook add a preload link for each of the fonts you require eg.:

    <link rel="preload" href="https://site.com/wp-content/uploads/open-sans-v18-latin-300.woff2" as="font" type="font/woff2" crossorigin="anonymous">

    You will need to repeat that with the correct URL for each font you want to preload.
    You may want to consider just preloading the fonts used above the fold.

    c) set the Hook to wp_head
    d) set the Display Rules to the Entire Site

    #2047318
    David
    Staff
    Customer Support

    The main issue is still the optimization of the site.
    when you enable the display swap it basically tells the browser not to wait for the fonts to load.
    And if disabling that option incurs a big delay then it means something is holding up the loading of them. Which may be a local issue or the fact they’re being loaded from the google API. For the latter i generally go with loading them locally but i don’t know if we ever got past this point where all fonts were locally loaded without the display swap.

    For more detailed digging into performance issues WebPageTest provides a better insight – i ran one here:

    [Redacted as requested by user]

    First off in the Waterfall there are 2 x Render Blocking resoruces being flagged.
    1. The Combined CSS file from autoptimize. You may want to test with CSS uncombined, that may incur less of a load time.
    2. The Google Fonts … back to loading them locally to eliminate that i am afraid.

    To help interpret more areas for improvement within the waterfall check below in the Resource requests.
    Anything in the Green ( before start render ) needs to be as small as possible, so you may want to look at compressing that image down from 100+ kb.
    In the purple area – can any of those scripts be deferred loaded?

    #1710220
    Tom

    Thanks everyone for the help so far.

    With this up and running, the issue I am now having is I get a flash of unstyled text. Is there some way I can make it wait to show text like it does when using Google fonts?

    Thanks

    #984094
    [Support request]

    Topic: self hosted font problems

    in forum Support
    dasigna

    hi there,

    there was a similar topic some time ago, but unfortunately i wasnt able to recover it …

    so another one.
    i am intending to host the used fonts in the website localy via @fontface and turn google fonts off. further one i want only the choosen font to show up as a selection in gp/customizer.
    so far everythings working.

    but: implementing it that way via child theme and custom css it gives me a FOUT (flash of unstyled text) upon pageload.
    not that sexy.

    trying the given option via elementor and uploading the custom font through elementor i have to turn off the option to respect the fonts given by the theme and then theres no fout surprisingly.
    downside is: i am no longer able to define the font-settings via gp, and gp does not even show the custom font to select.

    if i want to select the font settings via gp then i have to make elementor respect the font settings from theme and again having that annoying fout …
    letting elementor having (limited) control over the fonts theres no fout but gp does not recognize the font (unless i add it again via @fontface in custom css.

    in other words: eighter way running into problems.

    so the question is: is there a way to make gp recognize the custom font managed by elementor and avoid the FOUT??? and in addition being able to style all text in gp?

    another question would be why there is that FOUT when applying the custom font in child theme of gp but not when adding it via elementor???
    what does elementor different? (regardles that it uses @fontface obviously as well?)

    any enlightment appreciated 🙂

Viewing 6 results - 1 through 6 (of 6 total)