How to fix "flicker" of webfont of icons when doing reload of the page?

Navigation
2

When reloading the page the icons of a webfont are loaded only after loading the CSS and this causes a "dancinha" in the text.

See below the unwanted behavior of the icon when reloading the page:

ThesourcecodeformyCSS:

@font-face{font-family:"icons";
    src:url("../fonts/icons.eot");
    src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),
        url("../fonts/icons.woff") format("woff"),
        url("../fonts/icons.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
}

.i {
    font-family:"icons";
    display:inline-block;
    vertical-align:middle;
    line-height:1;
    font-weight:normal;
    font-style:normal;
    speak:none;
    text-decoration:inherit;
    text-transform:none;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.i--menu:before {
    content:"\f117";
}
    
asked by anonymous 18.10.2015 / 16:41

2 answers

1

You can try one of these <link> options with prefetch within <head> : 

<!doctype html>
<html>
    <head>
        <link rel="prefetch" href="(url)">
    </head>

Then being the CSS sources you should add in the prefetch : 

<!doctype html>
<html>
    <head>
        <link rel="prefetch" href="fonts/icons.eot">
        <link rel="prefetch" href="fonts/icons.eot?#iefix">
        <link rel="prefetch" href="fonts/icons.woff">
        <link rel="prefetch" href="fonts/icons.ttf">
    </head>
  

I've added fonts/icons.eot?#iefix since the ? sign causes the url to be considered another.

Differences

There is a method called prerender and this confuses some people, it follows the differences:

  • prefetch (preload):

    This is used to fetch and cache resources so they can later be used in navigation HTML5 specification , perhaps this already addresses the use of fonts.

      

    Note: It is apparently not supported by Safari (Mac OSX) yet

         

    List of browsers supported:   

         
    • Internet Explorer 11 +
      •   
    • Edge 12 +
      •   
    • Chrome 8+ and Opera 15+ (I put it together because they use the same technology, Chromium)
      •   
    • Firefox 2 +
      •   

  • prerender (pre render):

    Used to pre-render a full page that will probably be used in the next navigation.

      

    Note: The problem with prerender is that it is not yet supported by Firefox and Safari

         

    List of browsers supported:   

         
    • Internet Explorer 11 +
      •   
    • Edge 12 +
      •   
    • Chrome 49+ and Opera 15+ (put together because they use the same technology, Chromium)
      •   

Current Support:

Through the following links, follow the browser updates:

05.01.2016 / 23:32
2

This flick happens because your source has not yet loaded, in my applications I usually use a pre-loading, so these "problems" are not visible to the end user.

If pre-loading is not an option you can also leave the size of this fixed element (width, height), so even if the image has not been loaded the element will occupy the space defined for it.

    
03.01.2016 / 15:01
How to hide div when selecting options from a radio Open Folder to select file