FOUT when using google fonts

jodie
jodie

Me again, is it an option to use synchronous javascript loading of google web fonts to prevent the flash of unstyled text (FOUT) that's happening for me on my campaigns. Or did you prioritise load speed and this is a bad request?

Here's a link to the google/typekit library that you probably already know about: https://github.com/typekit/webfontloader

Comments

  • thaen
    thaen
    Posts: 586

    I'll have to research this more to give you an answer, but I don't have a timeframe on when that will happen.

    Obsidian Portal Developer

  • gastoff
    gastoff
    Posts: 136

    @jodie To help combat the FOUT and other content as it loads, I added a slight fade-in effect to my pages. It serves dual purposes as it helps to give a small window of time for effects and formats to load and it also helps soften the transition between pages in increase the visual appeal. Here is the CSS I used to make the effect:


    .campaign-landing-show #content{
    opacity:0;
    animation:wakeup 1s linear 0.5s forwards!important;}

    .campaign-public-layout #content{
    opacity:0;
    animation:wakeup 0.5s linear forwards;
    max-width:100%;
    padding-left:50px;}

    @keyframes wakeup{
    0%{opacity:0;}
    100%{opacity:1;}
    }

    It has a 1s fade-in on the Home Screen and a 0.5s fade-in on any other pages.

    image

  • ragnarhawk
    Posts: 118

    Very cool.  I just applied it to one of my campaigns with a small tweak.


    /* Fade in animation */

    #content:div:first-child {opacity:0;
    animation:wakeup 0.25s linear forwards;
    }

    .campaign-landing-show #content div:not(:first-child){
    opacity:0;
    animation:wakeup 1s linear 0.5s forwards!important;}

    .campaign-public-layout #content div:not(:first-child){
    opacity:0;
    animation:wakeup 0.5s linear forwards;
    }

    @keyframes wakeup{
    0%{opacity:0;}
    100%{opacity:1;}
    }

    With this, the background fades in after .25 seconds, and everything else than appears over the background.  It gives a moment to take in the background before the content loads

  • jodie
    jodie
    Posts: 74 edited March 6

    @gastoff that's really useful, thank you very much!

    That mostly cleared my FOUT out. It's only visible on the chonkiest text on the character pages now.

    Post edited by jodie on
Sign In or Register to comment.