I have an icon font that I preload in Chrome with
<link rel="preload" as="font" type="font/ttf" href="/static/media/IconFont.ad47b1fb.ttf" crossorigin="anonymous">
and reference later in my CSS with
#font-face {
font-family: "IconFont";
src: url(/static/media/IconFont.d9fff078.eot);
src: url(/static/media/IconFont.d9fff078.eot#iefix)
format("embedded-opentype"),
url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
url(/static/media/IconFont.c8a8e064.woff) format("woff"),
url(/static/media/IconFont.979fb19e.svg#IconFont) format("svg");
font-weight: normal;
font-style: normal;
}
Within one second of the page loading I use Unicode code point U+E95B with my icon font.
I still get a warning from Chrome, though, that says:
The resource http://localhost:3000/static/media/IconFont.ad47b1fb.ttf was
preloaded using link preload but not used within a few seconds from the
window's load event. Please make sure it has an appropriate `as` value and
it is preloaded intentionally.
How do I get rid of this warning?
Try changing from rel="preload" to rel="prefetch".
<link rel="prefetch" as="font" type="font/ttf" href="/static/media/IconFont.ad47b1fb.ttf" crossorigin="anonymous">
rel="prefetch" is used for a specific resource that is required but not use immediately. Chrome apparently isn't registering it's use in time and gives the warning, which is my guess.
If prefetch doesn't work try rel="dns-prefetch". rel="dns-prefetch" tells the browser to resolve the dns so when it is needed it can be loaded quickly.
I think prefetch should work though, as it actually requests and downloads the resource and stores it in the cache for later use, but it doesn't cause the browser warning if it isn't used quickly.
[EDIT]
According to this page this page, load your css first also using preload, then your font, i.e.
<link rel="preload" as="style" href="[your-css-file-here.css]">
<link rel="preload" as="font" crossorigin type="font/tff" href="/static/media/IconFont.ad47b1fb.ttf">
Both the css and the font are preloaded then the page renders, so the css doesn't have to be loaded after the font.
In your css file add "local('IconFont')," shown below, full example here
src: local('IconFont'),
url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
url(/static/media/IconFont.ad47b1fb.ttf) format("woff"),
/* continue your font declaration */
About all I can think of to help with this. Hope this helps.
This is an example from MDN.
https://mdn.github.io/html-examples/link-rel-preload/fonts/
And that gives the same warning too. When i open the developer tool and press Ctrl+F5 which forces the browser to hard loading of all resources this warning does not come across. If I load the page with F5 warning appears. So this should be a some kind of confusion on browser side. But i couldn't find a reliable answer.
https://github.com/mdn/html-examples/blob/master/link-rel-preload/fonts/index.html
Related
In my Next.js project I would like to preload my self-hosted fonts.
My _app.js contains:
<Head>
<link
rel="preload"
href="/fonts/leira/Leira-Lite.ttf"
as="font"
crossOrigin="anonymous"
type="font/ttf"
/>
</Head>
My globals.scss contains:
#font-face {
font-family: "Leira";
src: url("/fonts/leira/Leira-Lite.ttf");
font-weight: normal;
font-style: normal;
}
But this doesn't work. The console (on Firefox) logs "The resource at “url/fonts/leira/Leira-Lite.ttf” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.".
The problem seems to be that the font file gets hashed, but I haven't found a solution to this so far.
I now found out that I got the console warnings because I used relative paths to my public folder instead of absolute paths. This produced hashed font files in the .next folder. With the absolute paths the console warnings are gone and the fonts preload, so the issue is solved now. The code above works.
I have fonts which are defined as
#font-face {
font-family: 'Manrope';
font-weight: 400;
font-style: normal;
src: local("Manrope Regular"),local("Manrope-Regular"), url("#{$staticPath}fonts/Manrope-Regular.ttf");
font-display: swap;
}
Now lighthouse report has an issue with this
How can I optimise it and make this message go away?
Has it been a link, preload would have come handy, but this is an existing codebase and I can't really shuffle things around for now as there are many fonts defined.
Has been reading the https://www.paulirish.com/2009/fighting-the-font-face-fout/ and some related posts on CSS tricks, but all these mention about controlling the visibility and preventing FOUT and handling some cross browser issues. But neither of SO threads answered by Paul Irish or CSS tricks talk about preloading this #font-face specifically.
The question I guess here is that can I prefetch with Javascript without using <link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" /> ?
Maybe it's because the server is slow. You could embed this font via Google Fonts:https://fonts.google.com/specimen/Manrope?query=manro
You need to add this to your -tag in the site: <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet">
This is my example code:
<body>
<link rel="preload" href="/fonts/Roboto-Regular.woff2" as="font" />
<style>
#font-face {
font-family: "Roboto";
src: url("/fonts/Roboto-Regular.woff2") format("woff2");
}
* {
font-family: "Roboto", sans-serif;
}
</style>
<section>
<h2>Hello World</h2>
</section>
</body>
What I expect:
Roboto-Regular.woff2 gets downloaded once. The second access should take <5ms since it's reading from cache.
What I actually see:
Roboto-Regular.woff2 gets fully downloaded twice. The second access took as much time as the first one.
The blue bar here is Content Download.
What I have tried:
The solution suggested here: preloaded images get loaded again. But I quickly realised my issue has nothing to do with cache. I have configured serverside cache-control, as seen here in the response header for the file:
The previous waterfall screenshot is taken after a hard refresh (ctrl F5); this one is taken after a soft refresh:
This time both requests simply got their response from cache, which shows that cache has nothing to do with the whole situation.
So what has gone wrong here?
My environment:
Windows 10 Pro N 1909
Google Chrome 78.0.3904.108 x64
It turns out it's related to CORS.
I accidentally stumbled across the answer today when I noticed several new warnings in the console that weren't there before.
These warnings basically described my issue exactly as they are. I did a quick Google search and landed here: Preloading content with rel="preload", which said:
One interesting case where this applies, even if the fetch is not cross-origin, is font files. Because of various reasons, these have to be fetched using anonymous mode CORS.
As suggested, I simply threw in crossorigin to my preload declaration:
<link rel="preload" href="/fonts/Roboto-Regular.woff2" as="font" crossorigin />
And my preload worked.
Also
If you are preloading a resource with MIME type of fetch such as .json, you also need to include the crossorigin attribute in your preload declaration for similar reasons (I assume) (Reference).
For the next one who arrives here:
If you have the same issue (double download of your asset) but you've already set the crossorigin property.
<link rel="preload" href="/fonts/Roboto-Regular.woff2" as="font" crossorigin />
Are you really requesting an asset cross-origin?
Try removing it!
<link rel="preload" href="/fonts/Roboto-Regular.woff2" as="font" />
When opening the developer tools, chrome disables the cache, what can cause a reload of resources. Remove the checkmark on the disable cache box in the menu bar mostly fix the issue.
I am using font-awesome for icons in angular app. I checked my web result in pagespeed. I getting an issue with fonts.
Here is pagespeed result.
its said use <link rel=preload> but the problem is that ..fonts/fontawesome-webfont.woff?v=4.7.0 is available in FontAwesome's css file, So how can i add preload for this? or there is any solution for fix it?
Here is my index.html where i included font-awesome cdn.
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" crossorigin />
I think Here is the problem in css.
#font-face {
font-family: 'FontAwesome';
src: url('/assets/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
There are 3 ways to accomplish this.
Use it in local. You know the rest.
Tell browser that "I am going to call these files shortly, be prepared."
Use preconnect. (https://developers.google.com/web/fundamentals/performance/resource-prioritization?hl=en#preconnect)
Make sure you use as="font".
<link rel="preconnect" as="font"
href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0" type="font/eot"
crossorigin />
Tell browser that "I want you to fetch them asap."
<link rel="preload" as="font"
href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0"
type="font/eot" crossorigin="anonymous">
For point 2 and 3, replicate the same for woff and woff2. Declare correct mime types in type.
If you are using WordPress platform and facing this issue then check out this article on to fix preload key request
Simply you can use a WordPress plugin to add preload key to Fonts known as “Asset CleanUp“
Install plugin go to setting->Local Fonts-> Add URL there and it will be fixed.
For more info visit below Ref URL
http://freelancersiddheshlad.com/fix-preload-key-requests-with-fonts-in-wordpress/
My HTML website will use the font Open Sans, and I'm wondering what is the best way to load the font while keeping the website really fast?
Using google fonts in the html: <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
Using google fonts in the CSS: #import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
Downloading the font from the serveur in the css:
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
Something else?
Thanks!
2020 Way of Google Font loading.
If you want copy and paste solution, go ahead.
<!-- [STEP #1] -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- [STEP #2] -->
<link rel="preload" as="style" href="FontUrl&display=swap" />
<!-- [STEP #3] -->
<link rel="stylesheet" href="FontUrl&display=swap" media="print" onload="this.media='all'" />
<!-- [STEP #4] -->
<noscript>
<link rel="stylesheet" href="$CSS&display=swap" />
</noscript>
If you wanna know what is happening, here's the steps with a small explanation.
Preconnect to the google font origin. It help pages load faster by
telling the browser what assets it'll need in the future.
Preload font files. This ensures they are available earlier and are
less likely to block the page's render, improving performance.
Remember "display=swap" is important to score on google pagespeed
insight.
Apply css on load function. Ask the browser to load the CSS
asynchronously with the print context but as soon as the CSS file is
loaded then apply it to the all context.
Fallback if Javascript is disabled in the browser.
It really depends on how fast your own server is though. If your server is quite fast, of course I would prefer 3rd method:
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
However, if your server is really quite slow, then the 1st or 2nd method would be faster, as in was my case.
One very effective way of checking which is faster is to go to this website called pingdom. From there, you enter your webpage URL and then it would show how much time it took for each file to download.
You can see all your font files there as well, and how long it took for each one to download. Try using all 3 different method and find out which is the fastest through Pingdom.
The fastest way to do it is not to do it at all ;)
In your case the best options is to load it from google cdn and hoping your users already have it cashed from previous visit of a page using it.
I'd expect the fastest to be loading it from your own server using #font-face because there are less DNS lookups, and your server is probably under less load than Google's.
If you want it to load fastest you can inline the #font-face attribute to the head of your document, however I would recommend leaving it in the stylesheet.
Although, if you're willing to use some javascript, this looks like the fastest way I can find.
Well all the three ways are fine but when it comes to page load the third way will be perfect. As you will keep everything on local and no need to make multiple calls.
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
This is perfect because in first method obviously you are calling fonts from different server it will increase load time and in second method multiple calls will happen so the third way would be perfect.