CSS Font-display:swap blocking

Question

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

Blocking detail

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

Answer 1

The css property font-display:swap won't prevent the the blocking during the page load, it only will show a fallback font if the specified is not available yet.

If you want to optimize the fonts loading I recommend you read this post, it explains how to optimize the google fonts loading using the usual CSS link using preconnect or a full optimization using self hosted fonts.

Answer 2

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.