How to fix "dancinha" (Flicker) of icons Webfont when doing page Load?

Asked

Viewed 109 times

2

When re-loading a page the icons of a Webfont are loaded only after loading the CSS and this causes a "little dance" in the text.

See below for the unwanted behavior of the icon when re-loading the page:

bug webfont

The source code of my CSS:

@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";
}
css css-font-face

2 answers

2

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

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

1


You can try one of these options <link> with pre-effice inside <head>:

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

So being the CSS fonts you should add in 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 added the fonts/icons.eot?#iefix for the sign of ? makes the url be considered another.

Differences

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

  • prefetch (preload):

    This is used to search and cache "Resources" so that it can then be used in navigation HTML5 specification, perhaps this already meets the case of the use of sources.

    Note: Apparently not supported by Safari (Mac OSX) yet

    List of supported browsers:

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

  • prerender (pre-render):

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

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

    List of supported browsers:

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

Current support:

Through the following links follow the browser updates:

Browser other questions tagged css css-font-face

You are not signed in. Login or sign up in order to post.