We use the following code to locally preload (for pagespeed reasons) Google fonts:
<link rel="preload" href="/css/google-fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2" as="font" crossorigin>
<style type="text/css" media="screen, print">
@font-face {
font-family: 'Source Sans Pro';
font-display: swap;
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(/css/google-fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.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;
}
</style>
while Chrome (89.0.4389.82) does not show any warnings my Firefox 86.0 complains about that the preloaded fonts are not used within the first second of pageload. Therefore I commented them out only to find out after reloading the page that the fonts are actually used and now the page uses wrong (i.e. default) fonts.
My firefox runs under german OS so the original warning message reads as follows:
"Die Ressource unter "http://localhost:8080/css/google-fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2" wurde vorab geladen ("link-preload"), aber nicht innerhalb der ersten Sekunden verwendet. Es wird eine Überprüfung empfohlen, ob alle preload-Attribute korrekt gesetzt sind."
Deepl Translation would read something like this:
The resource at "http://localhost:8080/css/google-fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2" was preloaded ("link-preload") but not used within the first seconds. It is recommended to check if all preload attributes are set correctly.
I already checked stackoverflow and found:
- Preload is not supported by Mozilla firefox
- https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Now I wonder whether this should already work as I used this in Firefox 86 (and support is described starting with FF 85)
Anything I am missing here?