Search code examples
htmlcssfontssafaripreload

How to use preloaded fonts in macOS Safari?


In my web application, I'm using the preload resource hint to be able to display text in desired font ASAP. This works well in chromium-based browser, but does not seem working in macOS Safari. Actually, the fonts are downloaded using preload, but then downloaded once again when the CSS parser finds the first use in CSS.

After approx. 3 seconds, I get this warning message in macOS Safari 14.0.3:

The resource https://localhost/app/fonts/Dosis-VariableFont_latin.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

This is the html part (the link is located in html's head, before the links to CSS files):

<link 
  rel="preload"
  as="font"
  href="/app/fonts/Dosis-VariableFont_latin.woff2"
  type="font/woff2"
  crossorigin="anonymous"
/>

And the font is applied in CSS like:

/* latin */
@font-face {
  font-family: "Dosis VF";
  font-display: swap;
  src: url(/app/fonts/Dosis-VariableFont_latin.woff2) format("woff2-variations"),
    url(/app/fonts/Dosis-VariableFont_latin.woff2) format("woff2")
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@supports (font-variation-settings: normal) {
  some-selector {
    font-family: "Dosis VF", sans serif;
  }
}

Fonts are downloaded from the same domain as the web app (self-hosting).

Is there a problem in my code that leads to Safari not using the preloaded font?

Exists a way to (at least) tell Safari to not execute the preload? (to save some kilobytes/requests, I preload 2-4 fonts)

EDIT: I let this issue go and it seems it got fixed itself. Maybe the newer version of Safari helped (14.1.2)? Sometimes I can see the warning message after purging the cache manually while using service worker (but no warning messages while service worker is disabled).


Solution

  • I let this issue go and it seems it got fixed itself. Maybe the newer version of Safari helped (14.1.2)? Sometimes I can see the warning message after purging the cache manually while using service worker (but no warning messages while service worker is disabled).