The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.
Without the rule, our designs are limited to the fonts that are already loaded on a user’s computer, which vary depending on the system being used. Here’s a nice breakdown of existing system fonts.
General browser support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 3.5 | 9 | 12 | 3.2 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 126 | 127 | 4 | 4.2-4.3 |
Practical level of browser support
Things are shifting heavily toward WOFF and WOFF 2, so we can probably get away with:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}You could probably even get away with just WOFF2 these days.
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2');
}This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 36 | 39 | No | 14 | 12 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 126 | 127 | 126 | 10.0-10.2 |
The only practical thing also using WOFF buys you is Internet Explorer 11 support.
Deepest possible browser support
This is the method with the deepest support possible right now. The @font-face rule should be added to the stylesheet before any styles.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}Then use it to style elements like this:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}Slightly deeper browser upport
If you need a sort of a happy medium between full support and practical support, adding a .ttf will cover a few more bases:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
}| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Alternative techniques
@import
While @font-face is excellent for fonts that are hosted on our own servers, there may be situations where a hosted font solution is better. Google Fonts offers this as a way to use their fonts. The following is an example of using @import to load the Open Sans font from Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Then we can use it to style elements:
body {
font-family: 'Open Sans', sans-serif;
}If you open the URL for the font, you can actually see all the @font-face work being done behind the scenes.
A benefit of using a hosted service is that it is likely to include all the font file variations, which ensures deep cross-browser compatibility without having to host all those files ourselves.
<link> a stylesheet
Similarly, you could link to the same asset as you would any other CSS file, in the of the HTML document rather than in the CSS. Using the same example from Google Fonts, this is what we would use:
<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=Open+Sans&display=swap" rel="stylesheet">Then, we can style our elements like the other methods:
body {
font-family: 'Open Sans', sans-serif;
}Again, this is importing the @font-face rules but, instead of injecting them to our stylesheet, they are added to our HTML instead.
It’s about the same thing… both techniques download the assets needed.
Understanding font file types
The original snippet at the top of this post references a lot of files with strange extensions. Let’s go over each one and get a better understanding of what they mean.
WOFF / WOFF2
Stands for: Web Open Font Format.
Created for use on the web, and developed by Mozilla in conjunction with other organizations, WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts. This format can also include metadata and license info within the font file. This format seems to be the winner and where all browsers are headed.
WOFF2 is the next generation of WOFF and boasts better compression than the original.
SVG / SVGZ
Stands for: Scalable Vector Graphics (Font)
SVG is a vector re-creation of the font, which makes it much lighter in file size, and also makes it ideal for mobile use. This format is the only one allowed by version 4.1 and below of Safari for iOS. SVG fonts are not currently supported by Firefox, IE or IE Mobile. Firefox has postponed implementation indefinitely to focus on WOFF.
SVGZ is the zipped version of SVG.
EOT
Stands for: Embedded Open Type.
This format was created by Microsoft (the original innovators of @font-face) and is a proprietary file standard supported only by IE. In fact, it’s the only format that IE8 and below will recognize when using @font-face.
OTF / TTF
Stands for: OpenType Font and TrueType Font.
The WOFF format was initially created as a reaction to OTF and TTF, in part, because these formats could easily (and illegally) be copied, However, OpenType has capabilities that many designers might be interested in (ligatures and such).
A note on performance
Web fonts are great for design but it’s important to also understand their impact on web performance. Custom fonts often cause sites to take a performance hit because the font must be downloaded before it’s displayed.
A common symptom used to be a brief moment where fonts first load as the fallback, then blink to the downloaded font. Paul Irish has an older post on this (dubbed “FOUT”: Flash Of Unstyled Text).
These days, browsers are generally hiding the text before the custom font loads by default. Better or worse? You decide. You can exert some control over this through various techniques. A little out-of-scope for this article, but here’s a trifecta of articles by Zach Leatherman to get you started down the rabbit hole:
- Better @font-face with Font Load Events
- How we use web fonts responsibly, or, avoiding a @font-face-palm
- Flash of Faux Text—still more on Font Loading
Here are some more considerations when implementing custom fonts:
Watch the file size
Fonts can be surprisingly heavy, so lean towards options that offer lighter versions. For example, favor a font set that is 50KB versus one that weighs 400KB.
Limit the character set, if possible
Do you really need the bold and black weights for one font? Limiting your font sets to load only what is used is a good idea and there are some good tips on that here.
Consider system fonts for small screens
Many devices are stuck on crappy connections. One trick might be to target larger screens when loading the custom font using @media.
In this example, screens smaller than 1000px will be served a system font instead and screens that wide and above will be served the custom font.
@media (min-width: 1000px) {
body {
font-family: 'FontName', Fallback, sans-serif;
}
}Font services
There are a number of services that will host fonts and provide access to commercially-licensed fonts as well. The benefits of using a service often boil down to having a large selection of legal fonts delivered efficiently (e.g. serving them on a speedy CDN).
Here are a few hosted font services:
What about icon fonts?
It’s true, @font-face can load a font file full of icons that can be used for an icon system. However, I think you’re far better off using SVG as an icon system. Here’s a comparison of the two methods.
Next steps with @font-face
A New Responsive Font Format for the Web
Basics of Google Font API
Custom Fonts in Emails
Google Font API & Interview
Hey hey `font-display`
The @font-face dilemma
The At-Rules of CSS
The Making (and Potential Benefits) of a CSS Font
The New Bulletproof @Font-Face Syntax
Typography for Developers
Understanding Web Fonts and Getting the Most Out of Them
What’s the deal with declaring font properties on @font-face?
More on @font-face performance
Don’t just copy the @font-face out of Google Fonts URLs
FOUT, FOIT, FOFT
Getting the Most Out of Variable Fonts on Google Fonts
How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy
If you really dislike FOUT, `font-display: optional` might be your jam
Learnings From a WebPageTest Session on CSS-Tricks
Loading Web Fonts with the Web Font Loader
Public Service Announcement: Watch Your @font-face font-weight
Three Techniques for Performant Custom Font Usage
#152: Font Loading with Zach Leatherman
#035: Preventing Typekit FOUT
Related CSS properties
More @font-face resources
- CSS Fonts Module Level 4 (W3C)
- How to Use the URL Thingy in the
@font-faceRule (DigitalOcean)
Just as a suggestion, i think you should use the Paul Irish Bulletproof Method. This seems to be a more direct, quicker (less HTTP requests) format. Example:
I agree with Eddie, except do TTF and OTF fonts all have EOT versions? I’m not sure, for example, you can find both a TTF and EOT version of the Calibri font. It looks like there’s a line command utility out there to convert TTF and OTF fonts to EOT so that might be the best solution, but it sure seems like a chore.
fontsquirrel.com allows you to upload a font (make sure the license allows this) and will then create the various versions of the font for you.
This is great. I have one question, Do I upload the fonts to the server as well? If so what folder?
Hi,
I don’t understand where I could find *.eot file or *.otf file. There is a method to generate it?
Thank you.
Those are the font files. The extension .otf is an open-type font.
What should i do if a font has spaces for example I have a font called “some font” but the file name is somefont.ttf
exactly what you just did: put the two words “in quotes”
As mentioned above fontsquirrel.com.
Thanks, Chris!
I knew I had used this once before, but couldn’t remember where I found the conversion tool. Saved me a bunch of time.
For using a true type font do I need to specify a local font? It’s a home made font which no one will probably use.
I had a problem with the font I used not rendering properly when in small sizes. A few hours later (and a couple of grey hairs) I found that if your stylesheet is using
the @font-face needs to be outside. Like this:
THANK YOU! Been going crazy wondering why this wasn’t working in FF and IE and this has sorted it.
You’ve just helped me after 3 days of going mental trying to figure out why my fontfaces were not working in IE.
Thanks!
Really thank you man
I’m having trouble uploading (with cyberduck) fonts to my server (no ssh acces), they end up being 0kb in size. Fontsquirrel gives me an error too (io error), anything I’m missing here? Im on a mac, and have tried several fonts but all wont work.
Not sure about the uploading, but I was getting the IO Error from fontsquirrel.com using Chrome and I switched to FF and it uploaded fine. Not sure if that’ll help anyone, but worked for me.
I use Paul Irish Bulletproof Method, but in IE7/8 did not work for me insted Firefox and Opera did the job well!!
I will try this solution
in IE and I will tell you if is working.
As was mentioned by Chris a couple of times here: “fontsquirrel.com. Not only will they convert your fonts for you, they also generate css files using the “bullet proof” method that Paul Irish recommends.
If you font license won’t allow you to upload via font-squirrel you are out of luck
I’ve a serious problem here with font-face when I print the page found that the viewer didn’t display my font, how can I define my font when I print the page.
Thanks
I’m having this same problem.
Anyone with ideas?
Do you have fallback fonts in your font-family rule?
Like this
And/or you can always define a “safe” font in you print styles:
I am having a frustrating problem. I can’t get @font-face to work on windows xp at all. I have windows vista on a computer and have tested in all browsers just fine then when I checked in windows xp its not seeing the @font-face at all. I have tried a dozen ideas and all have failed in xp. I have to get it to work in xp it’s still a popular os. Any ideas?
What browser do you use on that WinXP machine?
IE6? IE7,8,9?
Firefox?
What should be the location of the uploaded font files? Is it relative of the url? if its not uploaded to the root path then do I need to include the path references in the src?
src: url(‘Delicious-Bold.otf’); to be say src: url(‘/font/Delicious-Bold.otf’);
Thanks
James
I have experimented with this and yes it works as expected; is relative of the root web folder.
James
Is there a way to midify an existing otf fonts?
In my language we use some fonts that have special simbols. Thants why im asking.
Thanks.
Try FontForge its free.
Yeah i also found that method of Paul Irish don’t works in IE6. But this way really works even in IE5 to:
You can review Demo for this at: http://www.960development.com/how-to-write-cross-browser-font-face-syntax/
Great article i hope after using this way we don’t need to use Cufon or sIFR for font Replacement.
What about “the cleartype bug”?
I mean, I know there’s a solution for that, but only for IE6/7.
What about for rest of them? :(
You can use this syntax in the sending of newsletters?
You have to apply some variation?
There is a NEW BULLET-PROOF version here as of April 2011:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
For example:
I had to learn the hard way that you have to put the @font face code in the of your document. It won’t source from the CSS!
Also, the .eot links provided from font squirrel actually cause the code to fail in IE8. I had to remove the src links and it worked fine! It even worked on other computers that did not have the font installed.
Why it works that way in IE I don’t know. I don’t think that program is fathomable.
ChrisB
@font-face does work in a css file. Make sure your src paths are relative of the root folder. Try AceeBaba’s code from above. Except make sure the format is ’embedded-opentype’ and not just ‘eot’
As for the eots from font squirrel, they seem to work in ie8 for me. Could be because of the format like i said above.
Also i don’t see how you got it to work on other computers without the src links. Unless you decided to use an external link from google or someone. Which i’d advise against since it will increase page load time. But if you do, make sures its above your css links or they wont know it’s there.
Steve,
Thanks for the suggestion. I did make sure that the files were sourced from a root folder in my initial testing, but I could never get the code to work for some reason. It is beyond my comprehension why the font works in IE w/out the sources, that being in IE8 even!
hi, i have designed a website mock-up in photoshop using Arial 12px font but when i am doing its html the Arial font looks different in HTML browser, is there any fix for this? really need to know.
Thanks
I realize this is almost two months old, but in the off chance you revisit this post…
Photoshop has an anti-alias feature in the type tool. It is next to the font size drop down in the top tool bar and at the bottom right corner in the Character Window. I usually change this to “none” in the drop down for any text that will be browser generated.
It’s not exactly the same text rendering, but it’s the best we have right now. There really is no industry standard tool that will render text identical to the browser (which renders differently depending on the browser and platform).
I hope that helps. Cheers!
Hey … great site! … I’m trying the GoogleWebFonts as @font-face in my site but in Google Chrome they don’t look as good as in IE or FF. I have read something about ClearType but that change is on client side, so it doesn’t make any sense to me…. do you guys know a way fix that? (the fonts are .ttf)
Thanks!
It is not work on FF6
Dears
I used code below not work in IE8/7 but work in IE9.
Note: this font support Arabic Language
I appreciated your support , help me plz ASP
thanks!
it’s not work again!
i test it and see not work in pesion or arabic!!!
I have a problem with my font sizes! My font size is 41px for example, and fits perfectly, but when it falls back to Arial, the font size is doubled in size! How do I just target the @font face, will I need to specifiy a second style sheet for just @font face?
I bought a font from fontspring.com (Avalon) to use on http://www.dealscout.co.za
I’m using the @fontface declarations they provide in the sample file with the font, but the font itself is appearing very “jaggedy” in Chrome and on some older browsers.
The declaration is as follows:
Do you have any suggestions on what we may be doing wrong that is causing this, or should we be looking for a new font?
If so do you have any reccomendations for fonts in Avalon / Century Gothic style that will have better cross browser support?
I’m having the same problem with Avalon Book in Chrome. Did you ever find a fix?
Super late response but…
It is a problem with how google renders fonts (GDI rather then directwrite) and it’s being fixed in the latest canary version of chrome to be released later this year hopefully. Till then, there’s been many hacks to get fonts looking appropriate, i found using this:
http://sassycoder.wordpress.com/2013/11/16/font-face-rendering-issue-in-chrome-2/
With a combination of some css hacks such as text-stroke / text-shadow usually works out pretty well for most fonts. Dont bother with -webkit-font-smoothing it’s not supported anymore.
i am using simple selector in head in html bt my font face is not working
style sheet in a page
h1{fontface:”monotype corsiva”; size:10; color:”red”; fontweight=:bold}
h2{font-face:”arial”; size:5; color:”blue”; fontweight=:bold}
h3{font face:”magento”; size:20; color:”yellow”; fontweight=:bold}
h4{font face:”times new roman”; size:15; color:”green”; fontweight=:italic}
THE QUICK BROWN FOX JUMPS OVER THE TIGHER
THE QUICK BROWN FOX JUMPS OVER THE TIGHER
THE QUICK BROWN FOX JUMPS OVER THE TIGHER
THE QUICK BROWN FOX JUMPS OVER THE TIGHER
plz let me knw the solution either here or on my id: [email protected]
Do you have the css file with @font-face connected to your html document ? Where are your files placed ? What browsers have you tested on.
“fontweight” should be “font-weight” and should only have the colon, not rhe equals.
Also, the only values for font-weight are “normal” or “bold.”
To specify italicized text in your h4, use: “font-style:italic; “
What is this site used for?
Why are people using IE6/5!! Lol, nice article, thanks for the helpful links
Hello,
I am having a problem with @font-face
I have everything set-up (I believe) as it should be. When I do a test of the HTML in Dreamweaver it displays like a charm, but when I FTP it and go to the site (after a cache empty) its all system font-y again.
If anyone could help, I would be greatly appreciative!
Thank you
I’m having this same issue! Was is ever resolved? I first used @font-face to fix antialiasing on Chrome with Google Web fonts (oh the irony) and now that I put the site on my server it loses the fixed quality.
Thanks!
Hey Chris,
Helpful article, I would love to see some more about @font-face and multilingual support. Will be embarking on a project soon that will need support for Arabic and Russian as well as western languages.
@font-face does not work well with css transitions. It gets all laggy and slow.
After few days of installing it, my css web fonts doesn’t work just what it was before. Now the site is messed up. But checking it on Chrome (even Safari), the fonts look just right. The only difference is on Firefox. I’m not sure if it was upgraded or not, but currently my version is 8.0.1 on Mac.
If anyone can kindly provide me some solutions, it will be a great help. My code for the css is as follows and all were generated from fontsquirrel.com, necessary files were uploaded too. Nothing changed on the css but wondering why it didn’t look right after few days. Thanks in advance.
*I placed the whole link of the directory of the sources of the fonts on the actual css code. I just removed it on this comment for security purposes. thanks.
Try moving @font-face before any styles.
Hello Chris,
I have used the embedded font it works fine. the css path is css/index.css
and the font path is
@font-face {
font-family: ‘test’;
src: url(‘../font/test.eot’);
some other css..
it works fine.
my roor index.html folder.
but when i added a new folder like newfolder and added a new index.html file. fonts are not shown.
what is the correct way to give path to the css and embedded font so it can works everywhere.
thanks
Hi Chris,
I have downloaded google fonts and found that the only two formats in the one I’m using are ttf and menu. I tried googling to find info on the .menu extension but haven’t found anything. Do you know what that extension is for?
Thanks
Hey there! I’ve been reading your weblog for a long time now and finally got the courage to go ahead and give you a shout out from Dallas Tx! Just wanted to mention keep up the great job!
Thanks, this i looking for. Very nice man.
after i followed these instructions , there is a spaces between a word letters …
any suggestion …???
Just a quick fix for anyone else that has this issue.
This solution wasn’t working on IE6 for some reason, finally found that it was the hash after that was breaking it.
In short, use this removing the
#iefixurl('webfont.eot?') format('embedded-opentype'), /* IE6-IE8 */I cant use @font-face for IE7. If anyone having the solution for it means, help me..
You can get all the font format from http://www.font2web.com/
My font face does not showing in IE7, it’s working when i am trying it in a different file but not when integrated in my website. Please help.
Sraddha,
Thanks a lot for your info !
When I look at caniuse.com I notice 3 things:
1) all IE support eot
2) All current/modern bowsers support ttf
3) Opera mini supports no format at all
Based on this I would suggest that including eot and ttf is more than enough? Why include woff and svg?
Nice idea Evert, i agree with you. it depending for every developer how to implement @font-face css.
WOFF is less than half the file size of TTF (and WOFF2 is even smaller).
I LOVE YOU!!!
Needed exactly THIS for my stylesheet and website.
Thanks so much!
when i write font-family name like above “test” and next
src:url(...)it doesn’t work with this font-family name “test”. please help me out, how to create font-family names other than “font names”.Thanks
I have strange problem with Arial font on Firefox, font size 17px is much wider than on chrome, ie 7/8. I wonder if some one could help on this.
I dont know why but I cannot get this Google font to work in Firefox (or any other for that matter). It works a dream in IE and I converted the TTF that Google fonts supplied me on Fontsquirrel to give me all the bits I needed to hold in the same folder as the CSS file. Can anyone see whats wrong?
@font-face {
font-family: Voces;
src: url(‘Voces.eot’);
src: url(‘Voces.eot?#iefix’) format(’embedded-opentype’),
url(‘Voces.woff’) format(‘woff’),
url(‘Voces.ttf’) format(‘truetype’),
url(‘Voces.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face not working properly in Ubuntu OS. The fonts looking like blurry. Any solution?
thanks for this tricks
Hi there!! I need some help please
I’m working with webmatrix 7.1 and IIS 7.5 express… it is actually my first time using webmatrix, and the fonts I’m using are not rendering….
this is one of the fonts
@font-face{
font-family:MenuFont;
src:url(‘Fonts/Arizonia-Regular.eot’);
src:url(‘Fonts/Arizonia-Regular.eot?#iefix’) format(’embedded-opentype’),
url(‘Fonts/Arizonia-Regular.ttf) format(‘truetype’),
url(Fonts/Arizonia-Regular.woff) format(‘woff’),
url(‘Fonts/Arizonia-Regular.svg#MenuFont’) format(‘svg’);
}
.Menu ul li a{
font-family:MenuFont, sans-serif;
text-decoration:none;
color:#000000;
}
so I’m going crazy here… I don’t think I’m doing anything wrong cause I did this first in .html just using notepad and the fonts rendered correctly. can anybody give me a hand or let me know if there’s any compatibility or support issue? I’d really appreciate it!!
Thanks!
Excuse me Chris Coyier,
What piece of css would I write for .otf fonts?
Thanks
Lucas
I have experience a problem with firefox when my default.html in root directory font face is working in all browser but when i move my default.html in en folder font face is not working in firefox but working in all browsers.
I have a latest version of firefox
I had the same problem with Firefox (12.0). If I put the fonts in my root web folder, everything showed up fine in all browsers. But if I put it in a fonts subfolder with the correct path code, all browsers work except Firefox. What causes this? I would prefer to stay organized and keep my fonts in a subfolder. Anyone find a way to get around this?
I get the proper output in all browser but while Printing in firefox the web-font doesn’t work , below is mine css.
@font-face {
font-family: ‘C39P24DmTtNormal’;
src: url(‘WebFonts/v100025_-webfont.eot’);
src: url(‘WebFonts/v100025_-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘WebFonts/v100025_-webfont.woff’) format(‘woff’),
url(‘WebFonts/v100025_-webfont.ttf’) format(‘truetype’),
url(‘WebFonts/v100025_-webfont.svg#C39P24DmTtNormal’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Someone is in love with fontsquirl or get some commission…
Lucky I have my own server so I don’t need all this want-to-be-but-cannot-be pretentious stuff.
Fact is, all these folks want is your data so they can get you from behind! (like facecrook and google and all this sly pretentious folk. Lucky I am not… neither ;-)
I strongly suggest – use an internet condom (unless you seek attention for pity) – steer clear of all this 3rd party “Service Provider” and stay save!
What are you babbling about, you doof. “Fontsquirl” is free… And so is Font Squirrel. Time to step away from the computer and return to your rocket science project.
Hi,
I’m strugling with this for hours, and I just cannot figure it out:
I can get web fonts to work on most browsers, but if i want it to work on internet explorer 7, I need to put the html, the css and the font files in the same folder!
It gets pretty messy, because I’m using the six-caps font for headers, and I cannot find a suitable fallback safe font for it.
Strange thing is that I cannot find it reported anywhere else, and if I test it with files from lyndas tutorial, it works just fine for ie.
Since it is working for every major browser (including ie8 and ie9) I’m assuming the paths are correct, and since my testing site is not at the root, i cannot give it absolute paths during development.
I’m using the exact latest font squirrel sintax from the downloaded webfont kits..
Is it possible that ie7 uses different path location on css, or maybe that it might be working on the other browsers because I already have a local copy?
Best regards,
isabel
This works for me but renders the font in a heavier weight than when I just had foolishly been using the simple:
@font-face {
font-family: ‘Baskerville’;
src: url(‘baskerville.ttc’);
}
same with other fonts, not just this one. Would that be because when I converted to eot with the font2web.com tool it created a heavier, ugly eot version?
If so, how can I make the browser “prefer” the nicer version?
This question is why I came to this page. Often times webkit browsers display horrific looking font in their own formats on Windows machines… Macs load the same font on the same webpage just fine in my case. Not too sure how to even go about fixing an issue like this.
I am using the Paul Irish method (on a currently private site), which works fine in Safari, but doesn’t work in Firefox (I’m using Aurora). My files are hosted on the Apple Cloud, not my own server. Does anyone know of a good solution?
I thought to forget about fonts for ie7-8. Thanks!
in IE <= 8 some properties are not supported
* only one url is supported
* format is not supported
@font-face {
font-family: 'BMitra';
src: url('fonts/BMitra.eot?#');
}
@font-face {
font-family: ‘NumansRegular’;
src: url(../font/Numans-Regular-webfont.eot);
src: url(../font/Numans-Regular-webfont.eot?#iefix) format(’embedded-opentype’),
url(../font/Numans-Regular-webfont.woff) format(‘woff’),
url(../font/Numans-Regular-webfont.ttf) format(‘truetype’),
url(../font/Numans-Regular-webfont.svg#NumansRegular) format(‘svg’);
font-weight: normal;
font-style: normal;
}
I set @font-face in my CSS file successfully & it’s work to specific class, but i want to set that font as a default into a body tag. i given css like this…
body { font:12px ‘NumansRegular’, Arial, sans-serif;} (not working)
but it not apply as a default font & size to my all html pages . so please help me how i use ‘NumansRegular’ font as a default font??
How can I avoid dynamically loading a webfont (e.g. Mylius Modern) from a website when it already exists on the local machine?
Hai
I Need your help : my question is
my Clint give some additional font to me ,i insert the .ttf file in ma css/font folder.
now am trying to run the .ttf font file . i already take some code from this conversation but Still its not Working …pls guide me :-(
I can not with IE . firefox and google chrome
Best, simplest and works both in Chrome and IE8…
Incredible!!! It function perfectly!
Thanks
Firefox has a bug for Print Preview when using @font-face. I also tried Cufon, and this also failed to appear in the Print for Firefox. (So much for my pretty resume font!)
Although the bug is marked as Resolved, it’s clearly not.
https://bugzilla.mozilla.org/show_bug.cgi?id=468568
Hi Lore
Did you ever find a solution ?
/Bilal
I have problem on IE9:
Here is the minimalistic example:
CSS:
HTML:
“`Reload normal
“`
It does work fine from local folder. It does not work when loaded from IIS (although eot file is being loaded fine). But it works again if I reload the page by clicking the link in HTML. And it breaks again if I reload the page clicking Refresh button. What’s wrong?
IE such a sick browser :/
how to use font face for LetterGothicStd bcoz this font not able to convert fontsquirrel site…?
Not sure if this has been mentioned already but Google fonts are much easier to use than messing with TTF and OTF files. Theres tons of choice so you can usually find something close enough and copywrite free for use in commercial projects.
http://www.google.com/webfonts
Hi there, thanks for posting this. I was wondering though – what is the purpose of the question mark (?) before “#iefix” in this line?
src: url(‘webfont.eot?#iefix’) …
You can read about some of that weirdness here: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
When I used chrome browser, the io error has arisen!
Should “MyFontFamily” in “Usage” in the example at the top of the page be “MyWebFont” to match the @font-face declaration?
Is there any fix (i’m at that stage where dirty fixes are accepted) that resolves or at least improves the font-smoothing of @font-face fonts in Chrome?
I have tried placing the SVG font before EOT, the text-shadow property, and lastly font-smoothing but none seem to work.
Thanks
Thanks Chris! You rock.
Hi, I’m not really good or familiar with CSS and other web designing thingies, so I’m sorry for my question.
I’ve used a font for my website which cannot be really found in a typical PC, so when my classmate uploaded the webpage, the font of the text of the webpage turned out to Times New Roman. So my question now is how can I upload the webpage with the font I’ve used? Please help me.
finally solved
Hi, I have devoted some time to solve this problem in my web, finally works correctly in all browsers, I compiled this important steps:
1) If you have a font type (ttf. otf), convert to all formats (eot,svg,woof) in (http://www.font2web.com/) and download on your web root folder to use it
2)use this code (modify “font-family”, “myfont” and use absolute url to find files), its very important tu use in a simple line this code, without newline.
3)Test in your server, in my local server with xampp works fine but in IIS internet public server don’t works in IE9, the problem is:
IIS 7 don’t have MIME Types defined for .woff file
If you try to open in IE9 your .woff font (http://absoluteURL/myfont.woff) you recive and error 404.
To solve it I open IIS, rootServer / MIME Types, and ADD MIME Type with (Extension = .woff, MIME Type = application/x-font-woff)
4) finally I try to open file again http://absoluteURL/myfont.woff and it works fine, I open my web and works well in all browsers
Thanks
i’m working on a wp theme project, I picked font-face with a Thai font.
Thai and English characters from the font, both work well in multiple modern browsers,
but Thai characters doesn’t work on my mobile, instead it shows the default Thai font. on the other hand, English characters from the font work very well on my mobile devices.
i’m using HTC A one and Samsung note,
and I don’t have a chance to try other devices yet
any idea?
I’m not having any luck invoking Google fonts using the font-face method. I’ve followed Google’s instructions with the link href:
Which works if I do direct Stylesheet references, like
or directly in a style within the HTML. But I want to create a font “alias” called Header-font to which I can assign different Google fonts to see how they display throughout my site. Font-face seems like the solution, but it only seems to work with resident fonts or direct URL fonts…I can’t figure out how to get it to recognize a Google font family. I’ve tried various ways of invoking it, like:
and a zillion variations on the src, such as
and nothing works. Any ideas on how to accomplish this, short of downloading every Google font I want to test and invoking it locally?
is there any way by which a browser gets the font locally(without internet) once it downloads from web(with internet)?
@chris: Thanks a lot for this!
@Curtis: Did you test it with src: url(‘Oranienbaum.ttf’); ?
This worked with another font on my browser.
@font-face, I see condensed fonts (for instance Futura condensed light or bold) are not rendering in IE8 and below versions. Anybody have any idea about how to fix it?
Is there a proper solution for the Firefox font render issue (on Macs only)?
Still exists with an icomoon self made font, made from svg-s.
Example Win | FF (21) on IOS
https://www.dropbox.com/s/fg9z2j5sw4ai3au/fonts-error.png
(sand color arrow font on white background, on FF the font is rendered too bold can’t see the arrow)
CSS properties that applied:
speak: none;
content: attr(data-icon);
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
Any idea?
(I’ve tried: font sizing in pixels not in ems, playing with font-weight…, but not getting a good results /actually i got exactly the same/)
I wonder why but it seems that some fonts render under IE8 and some of them just don’t wanna do it…
I’m using the declaration from the top of the page:
Someone has this issue ? I don’t really care about IE7…
and what is this?:
@font-face
{
font-family: "MyFont";
src:
url("programebi/acadnu_font/Seogut.ttf") format("truetype"), /* Safari, Android, iOS */
url("programebi/acadnu_font/Seogut.eot?") format("eot"), /* IE9 Compat Modes */
url("programebi/acadnu_font/Seogut.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("programebi/acadnu_font/Seogut.otf") format("opentype"); /* everyone else take this */
url("programebi/acadnu_font/Seogut.woff") format("woff"), /* Modern Browsers */
url("programebi/acadnu_font/Seogut.svg") format("svg"); /* Legacy iOS */
}
Thanks for the advice.
I followed the article, every thing works fine, but i have Hebrew font, english characters are shown properly but Hebrew characters are not getting rendered , problem is only on Chrome, Mozilla and IE are showing it perfect. Dont know what to do, I read some where to re-order the list and put svg at start, but it didnt work.
I am designing a new web project and I am going to use Icon fonts for symbols over my pages.
The combination you suggested is the regular mostly used one but using this combination, I get non-anti-aliased fonts in most of the browser (I always test my code using Chrome, Safari, Opera, IE 7-10 and FF) so I changed and changed the combination and here is the one am happy with.
Now I just see low quality symbols in IE 7 and 8 modes and all other browsers render the fonts really well like they are PNG images. And as you can see I don’t even use
url('fonts/Icon-Font.eot?#iefix') format('embedded-opentype')and it works fine!There may be difference between Icon fonts and regular fonts and I will let everyone know as soon as I get to fonts selection of my web design but for know, this may be useful to someone.
I also have to mention that, I do GZip compression on SVG files server side and the size gets as low as TTF and EOT files this way.
PS: I use Windows 8 (IE 7 to 10 using browser modes) and Mac OS X 10.8 for designing, coding and testing my web projects.
OK for the regular fonts I got this combination best for rendering the fonts:
I extracted the SVG out, because Non-English characters including Persian, Arabic, Hebrew and … do not work when using SVG font and using this combination I got best and most smooth rendering in IE 7-10, FF, Chrome, Safari and Opera.
Please note that I use Windows 8’s IE 10 in different modes to test IE 7-10. Please let me know if there is something that I am missing.
Hope this helps you all.
I recently purchased a subscription to H&FJ Cloud typography and am trying to figure out how to use @font-face with it. I want to use Gotham’s book and bold weights. All I have been doing up to this point is to put a css link H&FJ provides into the head and and just putting putting the regular declaration of font-family, font-weight and font-style into my stylesheets. I don’t have all the different font formats to declare.
I seem to have encountered this issue with IE8 and below not rendering my @font-face declarations.
I have literally tried all the solutions that I can find online when others have encountered the problem and now ive pretty much run out of ideas.
I am getting the issue on our live holding page: http://www.twdg.co.uk (thats not a link drop this is a genuine issue that I need a second pair of eyes to take a look at). The holding page doesnt matter to much but need to resolve it as I am developing our new site at the moment.
Thanks in advance.
So in reply to my own issue I finally had the sense to open up console in IE dev tools and saw the following error “css3111: @font-face encountered unknown error” relating to the .eot fonts. After some initial research it seems this error relates to an issue with the font file, possibly not generated correctly or a miss match in font naming and file naming, so once I dig a little deeper and fix it I will share.
Ok so I finally managed to fix this today.
This article helped: http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/
Basically the original file used to generate the .eot fonts had a miss match within the actual font itself, so used fontforge to match up the font files family name, fontname and name for humans. Regen the font and now my .eot files are fixed and work in IE8 and IE7.
Love your site/podcast, Chris! I just got set of web fonts from font vender and svgz files were included in them (as well as woff, ttf, eot, and svg) svgz is about quarter of the size of svg. Which browsers support them/How can I use them? Thanks!!
Any one know about .woff and .ttf fonts issues it always showing 404 error even am having fonts on correct location
my font family do not work in ie 7 and 8 plz help me ,
Help, my designer got an approval on a design using fonts from three different sources:
Googlefont
MyFonts (which uses the @fontface technique)
and http://www.typograpy.com (which specializes in just fonts from one foundry).
Anybody know if you can use all three kinds of fonts in one web application? I’m using Joomla, but that’s not the real issue.
for the record googlefonts use @fontface as well…
and there’s no real issue except a butt ton of overhead
I’ve been using Google Fonts on my website http://www.moreonfew.com and I must say that I really like it. Not only it loads faster but it also provides a good amount of fonts collection to choose from.
But google fonts sometimes have older versions of the fonts and they render weirdly because of that.
@Greg Ledger
If all the fonts have licenses that allow them to be used online, there’s no reason you can’t use them.
Go to FontSquirrel and see if they already have font-kits for the fonts. If they do, download them, concatenate the stylesheet.css files and you are ready to go.
If Fontsquirrel doesn’t already have a font-kit, go to the web-font generator, upload the .ttf files and it will create the font-kits for you.
And honestly, who cares if web fonts render in IE8 and below? If you are going to use an ancient browser, you probably don’t even know there are fonts other than Times New Roman, Arial and Verdana and you aren’t going to see all the other wonderful anyway.
Seriously I’m really tempted to start using normalize.css for my ieHacks.css file. Especially with Foundation.
And don’t forget to do this:
If your font is bold. That way you can use the actual bold font instead of browser “faux-bold” and still have bolded fallbacks.
Hey everyone,
I just completed my site.
I set the font codes to “Trajan Pro”
On my macbook pro and mac desktop the font style appears but for others it seems like an Arial font or some generic is appearing. I believe I have found the solution with this code here on this page but I am confused on how to set it up. Like as far as uploading the font? I don’t have the file, I just typed it in the code. Then where do I place this code on my html or css?
Any advice/help will be greatly appreciate it. Thank you.
If you’re using @font-face, then it’s always a CSS. And as with CSS you can put it either in HTML or CSS file, but puting it in HTML doesn’t really make any sense, because if CSS file loads quicker then your HTML (which is a bit funny but I guess that can happen), the @font-face might not load, so answering your question – put @font-face at the BEGINNING of your CSS file. Go to Fontsquirrel, download WebTypeKit with your fonts and read the manual, which is included in there How_to_use_webfonts.html. Hope that helps a bit. :)
What about using a base64 version of the font and excluding all other versions? Is that optimal/practical?
Base64 encoding is working for me. I’ve tried it with EOT and WOFF.
I’ve found that when using custom fonts with @font-face that there are differences in the way each browser renders them. The margins and padding is always different between chrome and FF. Chrome and Opera are the same, but FF and IE both require some adjusting to maintain consistency. For instance, the letter-spacing is always different between chrome, FF, and IE. I find myself browsing sniffing and then adjusting the fonts individually :
This works, but obviously browser sniffing, especially in this way, is not very efficient at all. There are some very strange differences though.
Any thoughts? Has anyone else come across this?
Would it make more sense to just add browser specific prefixes in the css file?
Yes that would make way more sense, I’ll be doing that. I didn’t know you could do that. I’ve used the vendor prefixes for keyframes and such, but I didn’t know it could be applied to font positioning. Thanks for the reply.
I was using all the font types but only single line of woff
src:url(../fonts/Simple-Line-Icons.woff) format(‘woff’);
worked for me … thank you
Font face doesn’t work in ie9 and oldest version please suggest us
if you have any solution about ie9 and oldest version
It does though ;)
Suggest us how
You use the code provided in this snippet. If it doesn’t work for you in IE 9, I’d suggest creating a reduced test case and posting it to the forums.
I’m using WOFF url, and this is loading correctly on my home page…but when I go to another page on my website, the font reverts to the default….
Any ideas why this might be happening?
The font face isn’t being overridden by another CSS stylesheet.
Cheers!
Got this to work by declaring the https and http as seperate font-families:
Please update snippet with WOFF2 format.
Example:
With every code if there would be example it’d be better to understand
Hey people, do you have a trick to quickly see which of the source is used by the browser. Fonts are working but i cant tell if my browser is using the woff, or ttf or even the svg file.
It’s pretty explicit in the font panel in firefox, but i’m looking for a way to see that in chrome devtools.
Any ideas?
@xavhan, use the developer tools and look at the network section (files the browser downloads), seems to work ok for me. I’m not aware of another method but perhaps there is.
Using the css at the top works fine on all PC’s and browsers I’ve tested but not on Android with latest Chrome5 (39.xyz), even after including woff2 file & reference.
Thank you for putting these CSS-templates together and discussing the implications.
I’m using these templates for generating CSS snippets in the google-webfonts-helper service for easily downloading Google web fonts in all formats (
woff,woff2,svg,ttfandeotfiles) and self-hosting them.Some font files are really large. Though they add beauty to the designs, they can significantly increase the page load time, and therefore can affect search engine rankings and decrease the amount of returning visitors of your website. While some users do not have to use extended language parameters like cyrilic, arabic etc., I for example have to use them. And this almost doubles the file size of the font. Because of this I remember that I had to use in some of my pages standart fonts like Arial, Tahoma despite I wanted to use new age font faces.
It would be great if sometime on the web, all the font files could be joined into one unique font file, that will be readable for all operating systems and devices. With this, it will speed up the loading time of the pages and therefore the user enhance experience.
Well saying this is easy, if it will become true(it should!!), will we see in the future.
Using the css at the top works fine on all PC’s and browsers I’ve tested but not on Android with latest Chrome5 (39.xyz), even after including woff2 file & reference.
Really aweful newbie question here. How is the link to the font format file delt with for the follow two:
url(‘webfont.svg#svgFontName’) – Does the #svgFontName part change to #svgMyAwesomeFont or #MyAwesomeFont? On a different note, what is with the #SomeText thing doing after the actual link to the font file?
Similar question with url(‘webfont.eot?#iefix’) – Does the ?#iefix get dropped in after the link to the font file and why?
The advantage of many of the web based font-face generators is they actually do lot of processing (like striping font names of special characters, generating correct css etc.) to make sure the generated font-face works across broad spectrum of the browsers. Apart from font squirrel mentioned here everythingfonts does a great job as well, as a font face generator : https://everythingfonts.com/font-face.
The disadvantage with the webfont generators though is because they change the font name they are incompatible with many font licenses.
Micah (2009) six years later, bang on!
http://blog.fonts.com/2013/01/opentype-feature-support-now-possible-in-nearly-any-browser/
Hi. I believe you have a typo in your second snippet of code.
currently:
url(‘myfont2.woff’) format(‘woff2’)
should be:
url(‘myfont.woff2’) format(‘woff2’)
You’re very right. Thank you, fixed!
I saw a really interesting talk by Ilya Grigorik at HTML5DevConf last year, Making Web Fonts Fast(er). The most valuable take-away was that if you use an often-used font on google fonts and use the html head link, chances are that font is already cached in the user’s browser. So the load time will be smaller for more popular fonts. I used to want to use fonts that were more unique and have since changed my dev practices. Just thought I would pass that info along.
Corrections:
Practical […]: Opera 27+ should be Opera 11.50+.
Super Progressive […]: Opera 10+ should be 23+.
The Google Font URLs should use HTTPS.
Got that fixed.
It seems like you forgot the last suggestion in my list?
I’ll update to protocol relative…
Google themselves provide it to you as I had it in the article, so I’m not sure if they PREFER you NOT using HTTPS or what. But since it works either way, I figure protocol relative is the way to go.
If I’m right, IE7+IE8 (in total) still has a desktop browser market penetration of about 5 percent, which in my view is way too much to neglect. None of the @font-face-solutions presented here work for pre-IE9-browsers. Now what about them?
Hans, the very first example includes IE6-8 support
Or if you prefer @import the syntax for Google is the one to use. It takes your request and replies with the appropriate @font-face for the requesting browser.
Thank you Peter. Initially I missed it in this very long discussion.
Question about using media queries to serve system fonts instead. Doesn’t the browser preload the fonts regardless of the viewport? Or am I confusing this with images?
The situation with fonts is still ridiculous. Google made the web fonts freely available, thats nice. Now they should allow them to be included in the base install of major operating systems. That would end this silly charade.
You mean all of them? As of 2022, there are over thousand (not counting the multiple variations for each of them)…
I am using a font name FSDillonWeb-Regular but the problem is i have no ttf format file and this is a php project and fonts are located in C:\xampp\htdocs\falcon-crm.eoe_staging\wp-content\themes\eoe
i have mentioned it’s path in css;
@font-face {
font-family: FSDillonWeb-Medium;
src: url(‘fonts/FSDillonWeb-Medium.woff’);
font-weight: 500;
}
fonts are not working and i am getting late on this project. Can anyone help me out.
Not sure this is what’s wrong but you said you were using a font called “FSDillonWeb-Regular” but still in the CSS write “FSDillonWeb-Medium”.
Re: ‘speedy’ CDN font services: NOT! Could have been except all the CDN services involve font file protection, in addition to stumbling through font service script compiles. All of the font services you list with the sole exception of Google are monolithic slugs under the hot Sun. Use Google for best speed in most cases, and otherwise this is a great @fontface article.
Btw: Shawn has a good idea concerning Google web fonts being added to operating systems, except… anti-trust and other trade violations are so common with Google now in Europe, that adding its fonts to a computer may soon be as deadly efficient as running paid ‘secret’ font services, stuck-fast CDN computing. No joke.
How come that W3validator considers link to Google WF as invalid in case of more than one font is used? http://c2n.me/3maRyeA.jpg
Could you share the look at this.
I have either to ignore W3v opinion or to spend some time to fix it by splitting into two lines of code.
Isn’t Google aware of it?
I know this comment is kinda old but you can escape the pipe character into the Unicode version %7C.
I just tried using the .otf font using the opentype format and it seems to work everywhere.
Is there any reason I would NOT want to do this and go with the 6 flavors of font extensions, ie: woff2, woff, eot, etc, etc.?
Hi,
do you think by now just using woff would be okay?
Also, I have some svgs embedded as images on my site, and the font used in these can only be seen from computers that have this font installed, even though I have the svg file in my @fontface rule…does anyone know how to fix this?
Thanks!
Have been playing with a few options mentioned in this article:
Is it possible that Google Web Fonts only uses .woff or .woff2 in their @font-face families? That would mean other font extensions aren’t supported through this technique.
I clicked-through the link above the mention that “A benefit of using a hosted service is that it is likely to include all the font file variations, which ensures deep cross-browser compatibility without having to host all those files ourselves.” and found no diversity of file extensions.
I’ve since downloaded the Google font I wanted to use, converted all the formats with web tools, and have those files local to the server.
If you’re trying to peak at what Google serves up to you, bear in mind they may (and likely are) doing server side UA sniffing to see what you need and delivering just that code.
Dear all,
I am working on Win 8, use this code. It works for IE and FF, Opera, etc.
What I understood are : woff font is light et common on Google fonts.
Hi All,
I added a custom font to my website via Squarespace but it is not working. It was functioning in Chrome and Firefox up until about the beginning of August 2016 (timing could be off) but it no longer is working. The CSS font works in Safari and in Chrome on my iPhone but does not work on the laptop. Does anybody know what the issue is? I linked the fonts to the “Manage Custom Files” folder in Squarespace.
How can I apply font face as Inline CSS….
Thanks for this article. I was looking for the meaning as to why I should use different font formats since some of the formats have much bigger file size than WOFF.
Is that possible to give more than one font in font face, if possible means how.
Not sure if anyone can help me here, I feel I have tried everything now to clear the cache in chrome after changing the font and it simply won’t load the new one, safari had the same issue at first, but safari let me fix it in seconds with the developer menu disable and empty caches I could see it happen in realtime, I have now cleared the cache in chrome 1000 times and still it loads the old set, I know this belongs in chrome support, but hey maybe someone here, because it’s related to using @font-face knows the solution and had the same problem. That’s why I’m just trying my luck here.
Never mind issue solved, my issue was that, chrome cannot rely on the svg file alone like safari can, chrome as with other browsers, tested firefox and opera all need to have all the fonts available eot, ttf, woff,… I was hoping I could simply use the svg file as such, due to a limitation of not being able to upload any real font types on this particular server.
Hello, please I need a quick fix. I want to use raw font on my website, it’s a .ttf file. How can I do that?
thank you
I’m embedding Linux Libertine and Linux Biolinum. I see in most all the comments here that folks are popping in more than one src+url in a font-face declaration. In the examples I saw posted elsewhere for Linux Libertine/Biolinum, there was a separate font-face declaration for each woff file, with the font-styles presumably serving as “gatekeepers” for each woff. Is there a best practice? Is just one declaration more efficient and faster to load? Are browsers smart enough to figure out the proper rendering?
(To clarify, each Libertine and Biolinum consists of several woffs: regular, italic, bold, etc. So I end up with 9 font-faace declarations!)
Can we use @font-face inside iOS apps to get local font files inside the app, like I want to use fontAwesome but @font-face isn’t working, it works when I use though.
Can someone help me? My custom fonts are working fine in my backend of wordpress but won’t load on the front end??
I made something in php to load the external fonts and improve the web performances. Perhaps it could be useful.
https://github.com/RickyIta68/font-performance-control
https://www.phpclasses.org/package/10839-PHP-Optimize-the-load-of-page-fonts-embedding-into-CSS.html
This article was very useful to me, but I have a small suggestion: When you talk about limiting the character set, it would be good to mention that this can be troublesome with some open source font licenses. For example, the OFL considers subsetting or optimization to be modification, so doing that without changing any reserved font names may be a violation of the license. This issue is discussed here: https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web_fonts_and_RFNs
Thanks so much! This saved me hours of work trying to figure the work around on my own. :)
WOFF2 support is now more widespread. IE11 doesn’t support it, nor does Safari on El Capitan and older, or Opera Mini. Other than those, it’s clear sailing!
https://caniuse.com/woff2
Hi, can we use multiple font style like this:
and is their order importent, if yes, what is the true order ?
thanks..
I cannot find the answer to my question, maybe you can help me.
Does link rel = “preload” work with @font -face?
It is impossible to preload a font without a link tag, will this tag work with this rule in pairs?
Fixed comment.
And I try again, used for this solution,
Or not a @font-face of svg of
I do not write a CSS in command-line.css.
@counter-style isn’t well.
I have been using Google fonts on my site https://itsmycode.com However the major problem is with the Page speed. The recent goolge pagespeed changes is impacting a lot on external fonts and css. I have atleast downloaded the fonts locally and trying to use it.
Is there a way to optimize and serve it better? Something like Async load for wordpress site?
Actually, I am using Google font(Varela Round) on my website https://codingdiksha.com The problem is Google Page Speed Test shows I need to preload the fonts. I don’t know how to do that. Can you help me to preload the Google fonts?
Here’s a handy little snippet that’ll help: https://css-tricks.com/the-fastest-google-fonts/
Although I mostly use Google Fonts for everything, there are some special cases where I have no choice but to host a font myself.
I wonder if one can actually get some speed improvements when rendering such self-hosted fonts (as measured by Google Page Speed Test, YSlow, etc.) by applying the same tricks described in this article (and related ones linked from it).
Has anyone done such experiments with self-hosted fonts?
Slow network and due to this reasons chrome would display in fallback font using @font-face CSS rule.
But I got few solutions and I am also using them on my site kodlogs.net
I have composed those solution here
I am planning to use Google Noto Fonts on my website
It does support a lot of languages (800+) and the plan is to localize the website into different languages.
I did notice that some of the font sizes are very heavy in fact it’s around 20mb+ and variants again heavy. Is there a way to optimize this? I feel loading 30mb+ font size is really bad on the performance side of the webpage
Should I download the fonts and use something like below?
or just configure the google link directly as a stylesheet