Search code examples
cssgtmetrix

CSS Font-display:swap blocking

I'm trying to optimize my website download speed by preventing Google font downloads from blocking the rest of the page from loading. Maybe I've misunderstood the font-display:swap feature of CSS, as I thought this was supposed to allow the font to download, without blocking continuing downloads.

However, the font-display tag in my CSS doesn't seem to be allowing the font to download without blocking.

I.e., my CSS

  @font-face {
        font-family: ...
        format('svg');
        font-weight: normal;
        font-style: normal;
        text-decoration:none;
        font-display:swap;}

But the GTMetrix waterfall shows that this font is still blocking.

Waterfall enter image description here

Blocking detail

enter image description here

Have I misunderstood the display:swap or mis read the waterfall?

Solution

  • According to Google devs:

    The font swap period occurs immediately after the font block period. During this period, if the font face is not loaded, any element attempting to use it must instead render with a fallback font face. If the font face successfully loads during the swap period, the font face is then used normally.

    swap gives the font face a zero second block period and an infinite swap period. This means the browser draws text immediately with a fallback if the font face isn’t loaded, but swaps the font face in as soon as it loads. Similar to block, this value should only be used when rendering text in a particular font is important for the page, but rendering in any font will still get a correct message across. Logo text is a good candidate for swap since displaying a company’s name using a reasonable fallback will get the message across but you’d eventually use the official typeface.

    I see in your font format SVG, I usually use WOFF or WOFF2. Maybe that specific font in SVG is impacting negatively the network performance of your website.