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
Related
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.
I need to be able to use specific Telugu fonts on my website. I have the ttf file and I generated the .eot, .woff, .woff2 and .svg files required. I followed the instructions on the site below and created my stylesheet as shown below
#font-face {
font-family: 'sree_krushnadevarayaregular';
src: url('Sree Krushnadevaraya-webfont.eot');
src: url('Sree Krushnadevaraya-webfont.eot?#iefix') format('embedded-opentype'),
url('Sree Krushnadevaraya-webfont.woff2') format('woff2'),
url('Sree Krushnadevaraya-webfont.woff') format('woff'),
url('Sree Krushnadevaraya-webfont.ttf') format('truetype'),
url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg');
font-weight: normal;
font-style: normal;
}
.badifont {
position: relative;
top: 1px;
display: inline-block;
font-family: 'sree_krushnadevarayaregular';
font-style: normal;
font-weight: normal;
line-height: 1;
}
https://css-tricks.com/snippets/css/using-font-face/
However, when I use the new class that I created, the text does not show up in the font that I am expecting. It is using the default Telugu Font that is available on my machine.
What am I missing?
I looked it up a little more and found this solution.
Go to Google Fonts and type in the name of your font. Most fonts I needed were already taken care of by Google. You can then copy the markup google provides and put it in your code.
So I had to do this
<link href='http://fonts.googleapis.com/css?family=Tenali+Ramakrishna|Sree+Krushnadevaraya&subset=telugu&effect=outline|3d-float' rel='stylesheet' type='text/css'>
Then I setup my stylesheet with the name of the font in the font-family as 'Sree Krushnadevaraya' and it worked.
3 things to check: in all your font files, remove the space, or put an underscore instead of space for instance:
Sree_Krushnadevaraya-webfont.eot
Then adjust those file names in your code for #fontface.
Then open your svg file in a text editor. check what is on the id of your font--it is usually around line 6, <font id=...>
Make sure you are using that exact font id name here AFTER the hashtag (#):
url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg');
Then make sure all your fonts and css is uploaded again.
I am working on a webfonts server and I got the api to spit out the css with the correct mime types.They are also getting linked to the page.
#font-face {
font-family: 'Pagul';
src: url('http://localhost:5000/api/webfonts/static/Pagul.eot');
src: local('☺'), url('http://localhost:5000/api/webfonts/static/Pagul.woff') format('woff'),
url('http://localhost:5000/api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
The ttf,eot files can be downloaded manualy using the links, for some reason these fonts are
not loaded by the browser what am I doing wrong here ? The font files dont have proper mimetypes is that the issue ?
I tried font-squirells syntax also,it's not working.
PS: The Css is dynamically generated and added to the head ?
Use relative paths instead of absolutes. For example, if your CSS is in site/css/style.css and your fonts are in the site/api/webfonts/static/ directory:
#font-face {
font-family: Pagul;
src: url('../api/webfonts/static/Pagul.eot');
src: url('../api/webfonts/static/Pagul.woff') format('woff'),
url('../api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Alternatively, use a service like Google Fonts and either link their CSS on your HTML or import it directly into your CSS
This is a general issue, and it seems like there is a solution.
Problem is that web fonts shows choppy in chrome. The solution should be to move the .svg call before the .woff call. Explained here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome and here: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
Problem is, that I'm using google web fonts, and importing the font like this:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
And I dont know, and cannot find out, how to import it with the #font-face css tag instead of the above. I've tried, but got stuck since google only offers the font in ttf and not svg or woff.
Hope you can help.
You'll have to host the fonts yourself if you want to apply this fix.
Your Google Fonts link is a request for a stylesheet, that gets dynamically built based on the parameters you supply - and on browser detection. For your example link:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
If you actually make the request yourself using curl:
$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic
this is what gets sent back:
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 400;
src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 700;
src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 400;
src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 700;
src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
The simplest thing to do is to go back to Google Web Fonts, download the font in question by going here and clicking the download arrow.
Then you can use the suggested fix from here, referencing the font files you downloaded:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
Did you do a proper reset of all styles?
Your inconsistent rendering experience can be caused by the browser defaults.
A reset.css sets all Elements back to default-values, this way cross-browser inconsistencies are reduced. There are many examples for reset.css, one of the Most popular is meyerweb reset css.
Another way to reduce inconsistency is to use normalize.css.
The difference between the two approaches in short is, reset.css just resets all browser specific styles while normalize.css has a wider scope by creating cross-browser defaults.
Differences between both are explained here by the developer of normalize.css.
If all those links do not help make sure that you set the font-weight always right an import all necessary font-weights.
You can read about font weights here: http://css-tricks.com/watch-your-font-weight/
You should also apply this technique when you use normalize.ccs because it doesn't reset the font-weight as rest.css does.
Add this to your stylesheet for each element.
opacity: .99;
For example -
p, li {
opacity: .99;
}
I have no idea why this works but it did.
I have uploaded a landing page that our company has contracted out, and Firefox does not render the Lato font, instead falling back to something further down the deck.
We have been given the following style sheet from fonts.googleapis.com.
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 100;
src: local('Lato Hairline'), local('Lato-Hairline'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
There is no problem in IE, Chrome, Opera, and Safari. Is there anything peculiar about Firefox that it would not be able to display the font?
I figured it out. I am using the NoScript add-on. It is protecting me from the threat of XSS attack from google, even with the entire site allowed. :D
I will research if there is a setting in noscript that will allow using the fonts, and post my findings here.
It will not likely cause problems for our customers. If they are using NoScript themselves, they will likely not be the sort to be bothered about the font on the landing page.
EDIT:
I was able to get this working. Under NoScript > Options, I selected the Advanced tab and the XSS tab. I then added the following exception:
^https://themes\.googleusercontent.com/static/fonts/lato/v6/[a-zA-Z\-_0-9]*\.woff$
It is more specific than it needs to be. One could trim off sub-folders as needed to allow more of the site. The following, for example, should enable most fonts:
^https://themes\.googleusercontent.com/static/fonts/[/a-zA-Z\-_0-9]*\.woff$
Are you running your tests locally, on a dev server, or something along those lines? Check Firebug's console and you should be able to find errors on the download, like a 404, or permissions, or something similar.
If using Noscript in Firefox:
Open the NoScript Options, go to the Embeddings tab and uncheck: Forbid #font-face
As described in: https://developers.google.com/fonts/docs/troubleshooting