I've gone over the posts related to this question (here, here and here) and tried various things. However, I'm still getting the warnings on Windows 10 in Firefox and Firefox Developer Edition (but in neither Edge, nor Chrome).
The warnings I get are per font variant, and occur after about 10 seconds:
The resource at “(url)/test/roboto-light-webfont.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
The resource at “(url)/test/roboto-regular-webfont.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
The resource at “(url)/test/roboto-medium-webfont.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
I'm self-hosting the Google font "Robot" on a test web page. The folder structure and markup/css are very simple:
test/
index.html
roboto.css
roboto-light-webfont.woff
roboto-light-webfont.woff2
roboto-regular-webfont.woff2
roboto-regular-webfont.woff
roboto-medium-webfont.woff2
roboto-medium-webfont.woff
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="preload"
href="roboto-light-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="roboto-regular-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="roboto-medium-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Roboto</title>
<link rel="stylesheet" href="roboto.css" />
</head>
<body>
<h1>Roboto (medium: 500)</h1>
<ul>
<li>Roboto (regular: 400)</li>
</ul>
<p>Roboto (light: 300)</p>
</body>
</html>
CSS:
@font-face {
font-family: "Roboto";
font-weight: 300;
src: url("roboto-light-webfont.woff2") format("woff2"), url("roboto-light-webfont.woff") format("woff");
}
/** Regular: 400 **/
@font-face {
font-family: "Roboto";
font-weight: 400;
src: url("roboto-regular-webfont.woff2") format("woff2"), url("roboto-regular-webfont.woff") format("woff");
}
/** Medium: 500 **/
@font-face {
font-family: "Roboto";
font-weight: 500;
src: url("roboto-medium-webfont.woff2") format("woff2"), url("roboto-medium-webfont.woff") format("woff");
}
h1 {
font-family: "Roboto", serif;
font-weight: 500;
}
li {
font-family: "Roboto", serif;
font-weight: 400;
}
p {
font-family: "Roboto", serif;
font-weight: 300;
}
Ernesto in this post suggested that adding link rel="stylesheet", etc after each preload would eliminate the warning:
<link
rel="preload"
href="roboto-light-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="roboto-light-webfont.woff2"
type="font/woff2"
/>
<link
rel="preload"
href="roboto-regular-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="roboto-regular-webfont.woff2"
type="font/woff2"
/>
<link
rel="preload"
href="roboto-medium-webfont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="roboto-medium-webfont.woff2"
type="font/woff2"
/>
But I got the same warnings.
Can anyone see any problems with the way I'm preloading the fonts?
