Lately i started noticing the website loads very slow at some point.
I've investigated this with firebug and when the page takes very long to load this is showing up:
It seems totally random, but the requests to webfont.woff just waits and waits forever. If i try to reach this resourse manually, it works fine and responses within 100ms. The page i'm talking about is http://wtf.maikelzweerink.nl, and the custom fonts come from the main domain maikelzweerink.nl.
The face-fonts are declared at default.css, also from the main domain:
#font-face {
font-family: 'Proximanova Regular';
src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot');
src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot?#iefix') format('embedded-opentype'),
url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.woff') format('woff'),
url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.ttf') format('truetype'),
url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.svg#ProximaNovaRgRegular') format('svg');
}
Even with the correct HTTP headers
In chrome the same deal (click for larger):
The MIME types are set to text/plain on the fonts, rather than what they should be.
In your .htaccess file (assuming Apache), add:
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf ttf ttc
AddType font/opentype otf
AddType application/x-font-woff woff
This will fix things, and make sure the fonts work in all browsers.
You need to preload or prefetch your font like that
<link rel="preload" as="font" href="/fonts/Pacifico-Regular.ttf" type="font/ttf" crossorigin="anonymous">
more information How to load web fonts to avoid performance issues and speed up page loading
I used base64 enconding to embed the font inside the CSS to reduce the amount of requests. The base64 has the downside of costing more initial bandwith but hey, it works! This fixed it.
Ofcourse i'm not really happy with a CSS file that is 180KB in size :/
Edit:
It turned out to be the ISP that was the problem. When I mannualy loaded the font it retrieved it from cache (dammit chrome!). Somehow these fonts where not directly available on the ISP service and requests/reads from the harddisk would take a while.
It's not just the fonts...
If I reload the page over and over in Chrome I see images getting stuck too
You can see the images being slow in this waterfall here - http://www.webpagetest.org/result/120904_JN_85ef2c2901df72a0b0ec4b3181eeec77/1/details/
Related
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 using a web font from FontSquirrel, that provided the webfont kit. I currently have the files in the root folder of "StilettoRedBand.com" but in my Storenvy page (stilettored.storenvy.com) the webfont isn't working in the title, or the footer.
I've been working on this project so much that I've appeared to have missed something and am having a hard time locating the issue, as it was working at first and then just stopped.
Can anyone help me out?
Here's the font source: http://www.fontsquirrel.com/fonts/WC-Mano-Negra-Bta
try that
#font-face {
font-family:WCManoNegraBta;
font-weight:bold;
src:url("path-to-the-font-file/WCManoNegraBta.otf") format("opentype");}
div {
font-family:WCManoNegraBta;
}
You need to make sure you got all the needed font-files (.eot, .ttf, .woff and .svg). Click the "Webfont kit" tab and download the whole package. Use this code and make sure your links are correct. You should also try removing 'text-rendering: optimizeLegibility;' if you are using this.
#font-face {
font-family: 'WCManoNegraBtaRegular';
src: url('WCManoNegraBta-webfont.eot');
src: url('WCManoNegraBta-webfont.eot?#iefix') format('embedded-opentype'),
url('WCManoNegraBta-webfont.woff') format('woff'),
url('WCManoNegraBta-webfont.ttf') format('truetype'),
url('WCManoNegraBta-webfont.svg#WCManoNegraBtaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I am having the same issue with firefox for my storenvy store. Here is the fix I found:
How to add an Access-Control-Allow-Origin header
You just need the following code in a .htaccess file in the same folder as your fonts:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
I haven't gotten it to work yet, but my website is hosted on godaddy so I don't know if my issue is related to that or not.
Good luck!
I was having the same problem! After reading this article I ended up getting the font to work for me.
What I did was add the #font-face code into my hosting site and saved it as a.css file
Example: http://lovepollution.com/andadrifont.css
Then I went to the theme section and clicked "css mode". I added below on the style sheet.
#import url('http://lovepollution.com/andadrifont.css');
Saved and works now.
I am building a website and I attempting to get cross-browser compatibility with a free font named Tex Gyre Cursor.
So far I have tried several ways which I have found searching though Google.
Site 1, Site 2 & Site 3
They have worked when testing them locally on Chrome, Firefox, Safari and Opera. Not on IE though. I'm not to bothered about IE since it's a massive pain in the arse and I have set Tahoma as the back-up font for this.
The problem arises after I have uploaded my files via FTP File Manager. The web host is GoDaddy.
I have uploaded the font files too.
I visit the site but the font is Tahoma, this occurs on all browsers previously mentioned.
I'm at my wits end and cannot discern the problem.
This was my first attempt with the CSS:
#font-face{
font-family:'TexGyreCursor';
src: url('fonts/texgyrecursor.eot');
src: local('texgyrecursor'),
local('texgyrecursor'),
url('fonts/texgyrecursor.ttf') format('truetype'),
url('fonts/texgyrecursor.svg#font') format('svg'),
url('fonts/texgyrecursor.otf');
}
My second attempt:
#font-face{
font-family:'TexGyreCursor';
src: url('fonts/texgyrecursor.eot');
src: url('fonts/texgyrecursor.otf');
}
If anymore information is needed please let me know :)
I recently had this issue, I was designing on windows machine with xampp and uploading to linux server.
I finally figured out that the font files were CamelCase and the css code was all lowercase.
It didn't bother my local machine, but linux sees CAPITALS.font and capitals.font as 2 seperate files.
You might want to check to see if that is issue your having.
I have come across many font embedding issues, whether it's hosting the fonts and CSS file on a different server or IE being an absolute !#?#.
In IE, press 12 which will bring up your developer tools and check to see what error is shown (if any). If you're being shown any of the following errors:
CSS3111: #font-face encountered unknown error.
my-font.eot
CSS3117: #font-face failed cross-origin request. Resource access is restricted.
my-font.eot?
I'd suggest following a thread I opened a few months ago which might help: #font-face import not working in offline website/different host using online fonts via CSS in IE only. This was an issue for IE only so wouldn't be surprised if you're having the same issue. I had other issues when transferring the font to a different server.
For any future font embedding, I would strongly suggesting using the following CSS code and ensuring all file types involved are converted correctly:
#font-face {
font-family:'My-Font';
src:url('../includes/fonts/my-font.eot');
src:url('../includes/fonts/my-font.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/my-font.woff') format('woff'),
url('../includes/fonts/my-font.ttf') format('truetype'),
url('../includes/fonts/my-font.svg#my-font') format('svg');
font-weight:normal;
font-style:normal;
}
just wanna help you guys quick,
First: Put this in .htaccess
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Secondly: Go to where you have hosted the site, in my case it's cpanel and check for the file permission, it should be 755 from the fonts folder till the font(s).
There shouldn't be any errors with the code; it should be a browser or network problem.
Try clearing all the cache and reloading the page several times.
If that still doesn't work, go to Chrome, load the page, press F12, go the the Network tab, and reload the page. See if the browser loads the font CSS file and the fonts.
If there is a 404 Not Found error, point your browser to the font files directly (yourdomain.com/fonts/texgyrecursor.ttf).
If you can't access the font file directly, check whether or not you've uploaded it. Then check the permissions of the file.
If that still doesn't work, try to add the <link> tag that Google Webfonts provides, then uploading.
Hope that fixes it!
Exactly! the solution is to call fonts from css respecting case sensitive. for example is not the same call like this: url (font / arial.ttf) a ARIAL.TTF file must be url (font / ARIAL.TTF)
I've just had the same problem, turns out there was a capital letter on my "Fonts" folder, I renamed it woth FileZila and now it works just fine!
The server has utf8 support. So, it is not necessary to install language fonts separately. If you need an additional fonts to be installed in your website upload the font file in your websites font folder. But, if any language is not supporting than you need to enable the support of utf8 on you server. You can do it by putting below mentioned code in head tag-
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
I've had the similar issue - and just resolved it by replacing the font URL/path.
1. add this into your head tag
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
identify your font family on your script, you can find it on the font link/url on your script.
this is mine:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500italic,700,500,700italic,900,900italic' rel='stylesheet' type='text/css'>
from the above details, I can find the font family is ROBOTO.
then I visit GoogleFont Website - then find my required font.
my font:
search font: roboto
category: sans-serif
once you found the required font - click on the 'select this style' button, then you will get the link/path like this:
link rel="preconnect" href="https://fonts.googleapis.com"
link rel="preconnect" href="https://fonts.gstatic.com" crossorigin
link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet"
copy it to your script.
clear your browser cookies/cache or try it on private browser (incognito)
please read all of this before commenting.
I'm currently working on a large website which is hosted on Amazon Web Services (AWS). This allows us to use scalability features in situations where the website might take a big traffic load.
Originally we started by separating out the code of the website a mix of HTML/PHP/Java etc and have static assets on a separate server. When I first tried using font-face in this setup I found that Firefox and IE would not load the font, and quickly discovered it was a cross-domain issue. There are a variety of solutions to this, which include modifying headers to allow access to the font files. However, the storage system we're using doesn't allow for this type of header modification.
In a bid to see if I could just get the fonts to work across all browsers I moved them and the CSS file that calls them to the same domain as the website. However they still don't seem to load up in Firefox or IE. If I copy the code and run it locally in my documents everything seems fine in all browsers (so the files cannot be corrupt). Firefox is definitely finding the files as I can see them being loaded via FireBug.
I've checked all URLs to make sure they're correct and resolve where they should.
Here's the font-face CSS I'm using with the smiley hack:
#font-face {
font-family : "AllerRegular";
src : url('aller_rg-webfont.eot');
src : local('☺'),
url('aller_rg-webfont.woff') format('woff'),
url('aller_rg-webfont.ttf') format('truetype'),
url('aller_rg-webfont.svg#webfontooYDBZYS') format('svg');
font-weight : normal;
font-style : normal;
}
The CSS file sits in the same directory as the fonts.
I also have the MIME types set in a .htaccess file which sits in the same folder as the fonts.
AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
If you have any ideas please suggest. I've been searching the web for a few days now but all solutions have failed me.
Currently, serving webfonts from AWS likely won't work in Firefox and IE 9+ because AWS doesn't support the Access-Control-Origin-Header. See this post on the AWS forums. Seems to be a problem for a lot of people.
Update 7/17/12:
As an alternative to AWS, Google's cloud services support cross-origin file serving. I just set up a bucket to serve webfonts, and it seems to be working. See this blog post and the documentation for more info.
Try do this:
On your server you will need to add:
Access-Control-Allow-Origin
To the header of the font files, so for example if you are using Apache you can add this to the .htaccess:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
My problem solved with this method.
This is possible using S3 without Cloudfront by adding the following CORS configuration.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
http://html5hacks.com/blog/2012/11/18/configure-amazon-s3-for-cross-origin-resourse-sharing-to-host-a-web-font/
http://blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/
You may well need to add support for the MIME types on the new hosting environment.
Take a look at:
http://www.jbarker.com/blog/2011/web-fonts-mime-types
i'm working on a website and currently using the #font-face tehnique (this + this) to load the fonts.
I noticed that some of the special characters are not loading properly -> ŠĐŽČĆ šđžčć.
This is, those characters exist in the font itself.
So, i made a test...
I loaded up a test page with #font-face fonts and cufon fonts...
The result is below ->
and of course, here is the code ->
<html>
<head>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="ReprobateCRO_400.font.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<script type="text/javascript">Cufon.set('fontFamily', 'ReprobateCRO').replace('h1');</script>
<style type="text/css">
#font-face {
font-family: 'ReprobateCROLASTRegular';
src: url('reprob_cro_last_last-webfont.eot');
src: local('ReprobateCROLASTRegular'),
url('reprob_cro_last_last-webfont.eot?#iefix') format('embedded-opentype'),
url('reprob_cro_last_last-webfont.woff') format('woff'),
url('reprob_cro_last_last-webfont.ttf') format('truetype'),
url('reprob_cro_last_last-webfont.svg#ReprobateCROLASTRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h2{
font-family:ReprobateCROLASTRegular;
}
</style>
</head>
<body>
<h1>--> CUFON --> šđžčć ŠĐŽČĆ</h1>
<br/><br/>
<h2>--> #FONT-FACE --> šđžčć ŠĐŽČĆ</h2>
</body>
</html>
So far i've tryed switching the encoding from utf8, widnwos1250, and nothing seems to work with the #font-face tehnique...
So, i have two questions... Does anybody know what's going on here? And, if i switch to using cufon insted of #font-face - how much would that slow down the page loading? (concidering cufon uses JS to load the fonts)
Thank you for your time!
I myself had a lot of issues with #font-face recently while I was working on a web-font intensive web site and it turned out that the online web-font generating tools themselves were the guilty ones. They simply generated bad .woff / .ttf /.svg /.otf files which resulted in a lot of issues for which it was very hard to pinpoint the source of the problem.
In my experience the only online web-font generating service that provides 100% valid - issue free web-fonts is Font Squirrel. It also allows a lot of useful stuff such as font subsetting which might also be the problem in your case (i.e. you didn't specify to include additional characters in your generated web-fonts - Serbian / Croatian is part of Latin Extended B if I am not mistaking).
Have you tried it with http://fontface.codeandmore.com/ an alternative #font-face generator?.
The H2 has the wrong font definition: the single quotes are missing.
It is now:
font-family:ReprobateCROLASTRegular;
Should be:
font-family:'ReprobateCROLASTRegular';
You seem to have worked out the font issue; re: load times, my experience is that both font-face and cufon will potentially be slow enough to have a brief flash of default text. It depends on your host and the user's connection of course; but both methods require a relatively heavy download (either the JS or the font).
So, all else being equal IMHO you may as well use font-face; at least browsers are getting better at caching the font file so after the initial page load you can get faster rendering. With cufon it always has to load and execute the JS so you'll never get rid of that part of the load time.
You implementation is good.
But when you used font-face. The font that you used. Must have all the characters that you want use. The .ttf or what ever must have all the characters and special characters when you will used it.
When you used Cufon. The Cufon generator make a lot of extra font letters for you. In the font generator of Cufon. You can select a lot of extra's for the font.
Do you understand it??