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">
Related
I'm creating personal blog with next.js.
Currently i use google fonts to provide fonts for my blog. Everything works fine except initial content shift on load.
When I load my web it will shift when new font loads (not all fonts have same spacing, sizes, etc...). So my question is how to prevent this content shift?
I have seen many suggestions to add loading screen until everything loads, but I think that the best solution would be just to bundle everything to the html itself. NextJs automatically inlines styles for me with <style/> tags and next-images will inline small images with base64. So how do I automatically inline my fonts (I dont want to always change tons of #font-face declaration when I decide to change font)?
Currently i use:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
I would like NextJS to automatically convert it to something like this:
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
You can use this amazing project to get any google font with base64 inlined src.
embedded-google-fonts
just put your google font link here: https://amio.github.io/embedded-google-fonts/
for example, for Barlow font: https://fonts.googleapis.com/css2?family=Barlow:wght#400;600;800&display=swap
then you can copy the result and create a <your-font>.css file in the project.
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/
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
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.
I'm building a site on Squarespace, and i'm trying to implement some fonts using the #font-face command. I can get it to work properly in Chrome and Safari, but not in Firefox.
Here is my code...
#font-face {
font-family: "Stagger Medium";
src: url("/storage/fonts/stagger/medium/staggermedium.eot");
src: local("?"),
url("/storage/fonts/stagger/medium/staggermedium.woff") format("woff"),
url("/storage/fonts/stagger/medium/Stagger%20Medium.otf") format("opentype"),
}
Any ideas?
Edit:
I've seen some things mentioning Cross-Site Font Usage using access control headers. Is that a possibility? I'm not entirely sure how to implement that though.
Edit:
I've also read that if you put the fonts in the same directory as the website, then it shouldn't be a problem in Firefox. HOWEVER, i'm using Squarespace, so I can only store the font in the STORAGE directory, which is separate from where the site is located.
I'm sorry, it was actually the opposite, remove the full url:
<link rel="stylesheet"
href="/storage/css/fonts.css" type="text/css" charset="utf-8">
I put both just to be safe.