Correct Font-Display Value for Icon Fonts

Correct font-display value for icon fonts

font-display: block;

As you commented, block still has a swap period; so it's still rendered until it's loaded.

Quoting Chris Coyier:

Wanna hear something quite unfortunate? We already mentioned font-display: block;. Wouldn't you think it, uh, well, blocked the rendering of text until the custom font loads? It doesn't. It's still got a swap period. It would be the perfect thing for something like icon fonts where the icon (probably) has no meaning unless the custom font loads. Alas, there is no font-display solution for that.

Considering alternatives:

I've also been there. If you have the chance, you might need to switch to SVG for icons. It has a few advantages over font-icons: SVG is better at pretty much everything than icon fonts.

Even Zach Leatherman, web fonts expert, has opinions about it on his very famous Comprehensive Guide to Font Loading Strategies.

This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice.

Icon fonts : some icon display as text instead on my machine

The webpages OP has shown uses the Material Icons font via Google Web Fonts. They serve a CSS file like:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), 
       local('MaterialIcons-Regular'), 
       url(https://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  ...
}

It will always try to load the local version of "Material Icons" font first, before the web font. Therefore, if OP has an outdated or customized version of "Material Icons", the desired effect won't be shown.

To fix this, delete the local "Material Icons" font, or replace it with the latest version if you still want a local copy.

Icon Fonts: How do they work?

Glyphicons are images and not a font. All the icons are found within a sprite image (also available as individual images) and they are added to the elements as positioned backround-images:

Actual font icons (FontAwesome, for instance) do involve downloading a specific font and make use of the content property, for instance:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

As the content property isn't supported in older browsers, these also make use of images.

Here's an example of completely raw FontAwesome in use as a font, turning  ( - you may not be able to see this!) into an ambulance: http://jsfiddle.net/GWqcF/2

Icon Fonts Not Vertically Centered With Text

I will say we need to reset the style first as we are involving here tags(h2, p) which has different behavior over browsers.

TO overcome this I have implemented old technique. of setting margin and padding to reset the style.

CSS:

nav {
    font-size: 1.2em;
    background: gray;
    text-align: center;
    padding:0;margin:0;
}
nav li:first-child {
    display: inline-block;
}
nav li {
    position:relative;
    display: inline-block;
    vertical-align:middle;
}
nav h2,nav div{
    position:relative;
    display:inline-block;height:100%;width:100%;
    padding:0;
    margin:20px auto;
}
nav h2{
}
nav div{
}

HTML: has changed it a bit to see the icons in fiddle.

<nav class="nav">
    <ul>
        <li><span data-icon=""></span><h2></h2></li>
        <li><div>ICON FONT FTW</div></li>
        <li><span data-icon=""></span><h2></h2></li>
        <li><span data-icon=""></span><h2></h2></li>
    </ul>
</nav>

Please check my fiddle this gives me fine results.

How to test 'font-display: swap' on your local machine?

I've used Lighthouse which is built-in to achieve this. This is the best you can do to test the same on local as far as I know.
Check the screenshots below-

• Before adding font-display: swap to the @font-face-description here" />

• After adding font-display: swap to the @font-face- description here" />

Reference: Can I use pagespeed insights for my local host website or offline?

How to Fix “Ensure text remains visible during webfont load bootstrap-icons.woff” Error in PageSpeed

preload and font-display: swap; are used together then this problem is solved

<link href="../css/bootstrap-icons.css" rel="stylesheet preload" as="style" />

@font-face {
    font-display: swap;
    font-family: 'bootstrap-icons';
    src: url('../fonts/bootstrap-icons.woff') format('woff'), 
        url('../fonts/bootstrap-icons.woff2') format('woff2');
}

---

Related Topics