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.
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
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.
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.
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 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 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 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).
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)
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 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.
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.
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!
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 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?
.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!
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?
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!
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?
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?
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 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??
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 :-(
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!)
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?
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.
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.
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.
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
.menu .mainlevel { font-family: Oranienbaum; }
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:
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:
@font-face {
font-family: Delicious;
src: url(Delicious-Roman.eot);
src: local('Delicious'), local(Delicious'),
url(Delicious-Roman.otf) format('opentype');
}
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.
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
@media screen {
styles...
}
@media print {
styles...
}
the @font-face needs to be outside. Like this:
@font-face {}@media screen {
styles...
}
@media print {
styles...
}
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
@font-face{
font-family:’Fontin-Regular’;
src: url(‘Fontin-Regular.eot’);
}
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.
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?
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:
/* @font-face */
@font-face {
font-family: ‘PhilosopherRegular’;
src: url(‘../fonts/philosopher-webfont.eot?’) format(‘eot’),
url(‘../fonts/philosopher-webfont.woff’) format(‘woff’),
url(‘../fonts/philosopher-webfont.ttf’) format(‘truetype’),
url(‘../fonts/philosopher-webfont.svg#webfontKWmDqtHl’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
body{
background:#fff;
color:#000;
font:20px ‘PhilosopherRegular’, Georgia, serif;
}
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:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
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
@font-face
{
font-family: ‘MY’; /*src: url(‘GE_SS_Two_Bold.ttf’); */
src: url(‘GE_SS_Two_Bold.eot’);
src: local(‘GE SS Two Bold’),url(‘GE_SS_Two_Bold.woff’) format(‘woff’) , local(‘GE_SS_Two_Bold’), url(‘GE_SS_Two_Bold.ttf’) format(‘truetype’);
}
h1
{
font: 20px ‘MY’ , Arial, sans-serif;
letter-spacing: 0;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
zoom: 1;
}
سياسة
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 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: aryan.solanki007@gmail.com
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; “
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.
h2 {
font-family: “UnitSlabProBlack”,Georgia,serif;
}
@font-face {
font-family: ‘UnitSlabProBlack’;
src: url(‘unitslabpro-black-webfont.eot’);
src: url(‘unitslabpro-black-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘unitslabpro-black-webfont.woff’) format(‘woff’),
url(‘unitslabpro-black-webfont.ttf’) format(‘truetype’),
url(‘unitslabpro-black-webfont.svg#UnitSlabProBlack’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
*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.
I LOVE YOU!!!
Needed exactly THIS for my stylesheet and website.
Thanks so much!
@font-face {
font-family: ‘test’;
src: url(‘../font/test.eot’);
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!
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?
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??
Very very useful. thanks a lot.
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
@font-face{font-family: ‘segoepr’; src: url(‘../fonts/segoepr.ttf’);}
@font-face{font-family: ‘segoepr’; src: url(‘../fonts/segoepr.eot’);}
Best, simplest and works both in Chrome and IE8…
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:
@font-face {
font-family: ‘oxygenregular’;
src: url(‘oxygen-regular-webfont.eot’);
font-weight: normal;
font-style: normal;
}
h1 {
font-size: 24px;
font-family: ‘oxygenregular’;
font-weight: normal;
font-style: normal;
}
HTML:
Reload normal
Text must fit. Aaaaa.
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.
@font-face{font-family:’GothamRM’;src:url(‘http://absoluteURL/myfont.eot’);src:url(‘http://absoluteURL/myfont.eot?#iefix’) format(‘embedded-opentype’),url(‘http://absoluteURL/myfont.woff’) format(‘woff’),url(‘http://absoluteURL/myfont.ttf’) format(‘truetype’),url(‘http://absoluteURL/myfont.svg#GothamRM’) format(‘svg’)}
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
.menu .mainlevel { font-family: Oranienbaum; }
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:
@font-face{
font-family: Header-font;
src: url(‘http://fonts.googleapis.com/css?family=Oranienbaum’);
}
and a zillion variations on the src, such as
src: local (‘Oranienbaum’)
url(‘Oranienbaum.ttf’) format(‘truetype’)
src: url(‘Oranienbaum’)
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)?