How to use @font-face in CSS
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.
Table of contents
- Practical level of browser support
- Deepest possible browser support
- Slightly deeper browser upport
- Alternative techniques
- Understanding font file types
- A note on performance
- Font services
- What about icon fonts?
- More @font-face resources
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 |
|---|---|---|---|
| 113 | 113 | 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:
You could probably even get away with just WOFF2 these days.
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 |
|---|---|---|---|
| 113 | 113 | 113 | 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.
Then use it to style elements like this:
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:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
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:
Then we can use it to style elements:
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.
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:
Then, we can style our elements like the other methods:
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.
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.
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.
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 .
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:
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.
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
More on @font-face performance
Related CSS properties
More @font-face resources
-
(W3C) (DigitalOcean)
Comments
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”
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.
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.
I’m having this same problem.
Anyone with ideas?
Do you have fallback fonts in your font-family rule?
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’);
I have experimented with this and yes it works as expected; is relative of the root web folder.
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:
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:
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.
@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)
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:
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
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
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.
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.
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.
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?
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 #iefix
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.
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.
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 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?
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.
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:
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: ‘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…
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?
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!)
Did you ever find a solution ?
I have problem on IE9:
Here is the minimalistic example:
CSS:
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.
Hi there, thanks for posting this. I was wondering though – what is the purpose of the question mark (?) before “#iefix” in this line?
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 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.
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
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
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.
(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.
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