With the node modules i have this file added to my theme. But it is showing in the "Google Pagespeed Insight". Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load.
In my CSS file it is import like this.
#font-face {
font-family: 'Graphik Web';
src: local('Graphik Web'), url('#{$spirit-font-path}Graphik-Regular-Web.woff2') format('woff2'),
url('#{$spirit-font-path}Graphik-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-display: swap;
}
But still it is not working as in the report from Google Pagespeed Insight. Please let me know if i think missed anything or to add something.
To get rid of that error, you have to get rid of the #import (which here translates to src url). The #import directive blocks parallel downloads. You have to change the code to import the woff in the main html with a link tag.
Related
Hi I'm facing this problem in google pagespeed
I almost get my site speed to 100 the only thing remaining is
Ensure text remains visible during webfont load
I'm already using font-display:swap; so why is this not fixing my problem.
here's my external font css
#font-face {
font-display: swap;
font-family: 'Miriam Libre';
font-style: normal;
font-weight: 400;
src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdTh798HsHwubBAqfkcBTL_fZ5P7.ttf) format('truetype');
}
#font-face {
font-display: swap;
font-family: 'Miriam Libre';
font-style: normal;
font-weight: 700;
src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdT-798HsHwubBAqfkcBTL_X3LbrQsq_.ttf) format('truetype');
}
I generated this css using this commands
npx local-webfont https://fonts.googleapis.com/css?family=Miriam+Libre:400,700 /Users/admin/Documents/projects/font.css fallback
which I got from https://github.com/swissspidy/local-webfont
You are using google fonts. Its better to add &display=swap to fix the issue.
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:400,700&display=swap" rel="stylesheet">
Check this : https://www.infyways.com/fix-ensure-text-remains-visible-during-webfont-load/
This property
font-display: swap;
saved my life. Full example is as following:
#font-face {
font-family: 'Pacifico';
font-display: swap;
}
And if you're using google fonts then use &display=swap at the end of href url, as following:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
Check your main css file, is there any css code #font-face? If not, add your code above to your main css or other css that used for your html page. You don't need add your code to html page.
Although your code is correct but it won't solve the problem if it is installed on the html page but in the css file still no code font-display:swap;
Edit it on your css, and skip on html page
I am not sure what is wrong, but my phone was unable to show my blog post using this font. It reverts back to the standard font used in blogspot again
#font-face{
font-family: 'citystencilregular';
src: url('https://www.dropbox.com/s/3p2opgb34hqtabs/citystencil-webfont.woff2?dl=0') format('woff2'),
url('https://www.dropbox.com/s/0vrf25i02ol7qpz/citystencil-webfont.woff?dl=0') format('woff');
font-weight: normal;
font-style: normal;
}
Of course you can not. If I use your link, I do not get the font file, but an HTML which offers me download the file to load page.
Get this to work needs the font file being send back, not a html page.
Like here: https://fonts.googleapis.com/css?family=Open+Sans
My question can be seen as a follow-up of this answer.
I use Google Fonts for my project and now want to change the unicode-range, so only numbers are affected (see linked answer above). My problem is that I don't get it to work with an include:
#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
When I import the font like this, the font-face is already generated by Google (Google provides also the correct font-face setup to avoid cross browser problems, very convenient). I tried overwriting the imported font-face like this:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
unicode-range: U+30-39;
}
But that didn't work. To achieve the desired affect of having only numbers attached, I need to take the CSS from the Google import URL and copy it into my own CSS/SASS document. But then I lose the cross browser service that was done by Google Fonts API and also the speed of their CDN.
Is there a way to change the unicode-range while maintaining the Google font import or do I really need to host the fonts myself when I want to use unicode-range?
If you want set the range while you are importing, just add to the link the variable 'subset'.
For example:
#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin");
Or, if the text is very small you can change the subset variable for text, and add the content inside.
For example:
#import url("http://fonts.googleapis.com/css?family=Inconsolata&text=Hello");
Documentation
What is unicode-range?
It's a prop used to tell the browser when to download a font file. As soon as any character that belongs to the given range is rendered: the font file is downloaded.
The unicode-range is not intended to assign the style to the characters from the given range .
Solution
The best option is to use the text parameter to get a font file per style that contains just the characters you need, in this case the range [0-9].
URL:
https://fonts.googleapis.com/css?family=Lato:300,400,700&text=0123456789
Google Fonts response:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh7USewqdFhfZ3-4B28Jv7vc&skey=91f32e07d083dd3a&v=v22) format('woff2');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/l/font?kit=S6uyw4BMUTPHvxwiUT-eLhTc2OsC1s0&skey=2d58b92a99e1c086&v=v22) format('woff2');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh6UVewqdFhfZ3-4B28Jv7vc&skey=3480a19627739c0d&v=v22) format('woff2');
}
As I understand the best way to include google fonts on a website is to use the #font-face and specify the location of the .woof file in the URL.
According to my understanding from reading the thread here Including Google Web Fonts link or import? using #import seems to be bad. And its difficult for me to import the font by specifying it as a <link> based on the layout that I have setup.
With all this into consideration I found that using this method seems best. eg.
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
But when I select the required fonts https://www.google.com/fonts it doesn't show me the .woof file location, how can do I found this ?
I would like to use a font I've paid from webtype.com on my wordpress blog. I don't own the blog so I can't change anything in the main php files as function.php. So, the only solution I've found is to add this content in the css customization file :
#font-face {
font-family: "Scout Normal";
src: url("http://the/url/of/the/file") format("woff");
font-style: normal;
font-weight: normal;
}
.block p {
font-family: "Scout Normal";
}
The problem is that everytime i save the file, Wordpress remove the url in the loading of the font, that means
src: url("http://the/url/of/the/file") format("woff");
become
src: format("woff");
Do you have any ideas to force the loading of the font, or an other idea to load it ?
Thank you for your help.
You can add it to functions by change it from wordpress backend here: Appearance > Editor
http://prntscr.com/4ddfn4