New to the community? Start here

Font optimization for google fonts and adobe fonts

Hi! im trying to solve this "Ensure text remains visible during webfont load " but i dont really understand how to do it.

someone have a tutorial? or can upload a screen with a real example.

i need to know how to solve this whit google fonts and adobe fonts. the adobe fonts issue is very important.

thanks

Wed, 21 Aug 2019 19:18:41
More Hummingbird Pro discussions
Hummingbird Pro
  • Kris Tomczyk
    • Ex Staff

    Hi Rensoconese

    Hope you are doing good today.

    This issues is related to missing font-display property in css which call this font.

    You can read about this issue and fix here:

    https://web.dev/font-display

    To simplify all fonts are called from css file which could look like this:

    @font-face {
    
font-family: 'fontname';
    
font-style: normal;
    
font-weight: 400;
    
src: local('fontname'), local('fontname'), url(https://fontsdomain.com/fontname.woff2) format('woff2');
    
}

    What is missing there is a

    font-display: swap;

    You can simply fix that by checking you site css source and track there url from your screenshot.

    Then copy whole “@font-face” which call this font, add font-display: swap; property and new code add in Appearance -> Customize -> Additional css section.

    After some time you can run new preformance test and issue should be gone.

    Hope this help :slight_smile:

    Kind Regards,

    Kris