Paul Irish

I like the solution and thanks for test cases.
The only problem I can spot is that IE will never use the local font even if it is present, will it?
Being fonts something totally re-usable I'd love to find a perfect way to split the specific file inclusion for IE and not IE browsers, without usage of ugly un-masked conditional comments.

Paul (and Andrea) … Thanks! I've tested your assertions, the code and even played a tad with IE grabbing a local copy.

Paul set me to tinkering

This is great. @font-face never made so much sense until now :)

Wow, I haven't even thought that IE could download both font files.
This is great solution and now we really have to let people know about it.
Thanks Paul.

LOL @ thorough, 'twas more a "stream of consciousness" thing, but thanks!

I've updated the cross-browser font embedding tutorial, crediting you and Andrea for your contributions.

Thanks for sharing Hopefully, we'll get the word out, before everyone is running around posting two @font-face selectors!

Great work, good to see smarter solutions popup now that a large majority of the browsers support @font-face.

Paul,
In my tests, Opera isn't accepting your syntax.
So far, OK with Safari, FF3.5. But Opera is bombing out.
Have you tested with it, as yet? Maybe I'm missing something.

Seems that Opera doesn't support "local". Once again, unless I'm missing something.

Could we simply use filters?

@font-face{
*font-family:'Graublau Web'; /* here you go, IE 6 and 7 */
*src: url('GraublauWeb.eot'); /* here you go, IE 6 and 7 */
font-family:'Graublau Web'; /* everyone else take this */
src: url('GraublauWeb.otf'); /* everyone else take this */
}
Sorta' di(e)rty, but it ought to work.

So far this is the most "Bulletproof" for me.

@font-face {
	font-family: 'Graublau Web';
	src: url(GraublauWeb.eot);
	src: url(GraublauWeb.otf) format("opentype");
	font-style: normal;
	font-weight: normal;
	@-moz-document url-prefix()
	{
		src: local('Graublau Web Regular'), url(GraublauWeb.otf) format("opentype");
		font-variant: normal;		
	}
}

This way at least FF can enjoy the benefits of "local" without breaking Opera and Safari doesn't break when using "font-variant". But I'm looking forward to seeing better solutions.

The shame is that, even with this is a new keyword, we are already making hacks

@eduardo
Hacks are price we pay for freedom from reliance on a single vendor.

@paul
Re: Opera. Yes, I WAS missing something. local() works OK in Opera. But Opera will not accept a call to an EOT file. Opera's Dragonfly debugger explains it as an "invalid src property". Further, unlike the other browsers, Opera doesn't just ignore the rule and move on to the next. It throws out the whole @font-face rule that contains the call to the EOT.
This is quite deliberate. I believe the standards compliant thing to do would be to ignore the rule and attempt to parse the next.
Seems like somebody just doesn't like Microsoft. ;)
Regards, Rich

Did anyone figure out a way yet to use eot files with font-style? As far as I know it shouldn't work in IE by just including the property. But maybe there is a hack to get around this.

After your email, I created some testcases at
http://dl.getdropbox.com/u/2042542/font-face.html using your original bulletproof syntax and adding font declarations. It seems as if IE and Safari can't deal with font-variant.

Maybe it's just me, but Firefox 3.5.3 won't render the correct font if a) the custom font is not installed on the local computer and b) the format is defined like so:

…url('/media/font.ttf') format('opentype');

Only this will work:

…url('/media/font.ttf');

About your Safari permission error, it deoesn’t seems to be a Safari issue but instead a Linotype Font Explorer one.
There is a preference controlling the font requests.
At least that’s what I’ve experienced and solved (You just need to set up Safari to ignore the font requests :-)

I’ve got a test page at http://www.thyb.net/cosmos/index-fonts.html and I’m still fighting between postscript names from Safari and full font names in Firefox, the font-variant and the slow loading time.

So I hope I’ll be able to use corectly @font-face now with your great article.

Thanks again.

First a disclaimer: I haven't tried @font-face yet. My immediate reaction after reading this article is that a conditional IE-only stylesheet is actually the "best" way to handle this – it's widely recognised that all other solutions to make IE use different CSS to the other browsers are essentially hacks, which could possibly break in a year or two when new browsers are launched, or existing browsers are updated, wheras making use conditional comments are supported. Personally I prefer to have all my IE workarounds hidden away in a seperate stylesheet rather than polluting the global styles :)

Now to fix the caching issue.

It takes about 2-4 seconds to see the @fontface font replace the standard html font.

Ideas?

Also, what if you're using a font that's probably not licensed for web use? Not sure if it really protects me but I change the name of the font file so it's not so apparent. Kind of hard then to declare the local version right?

@Paul Irish
Hmm. I was just looking into it. I may be able to set the mod_expires or set caching in the htaccess. I'm not really a "server" guy but it looks easy enough. I'll probably give it a try soon.

hi great post but i could use a little more information. does this functionality only work in IE 8 or latest fire fox? what about previous versions? sorry i havent done my research and just came across this! nice one for the info.

Hi Paul,

I have a site that originally used Cufon for font replacement: http://blog.franklyrealty.com/

All was well and good until the WP 2.8 upgrade. Then Cufon worked on main post page, but not others. I've decided to simply use @font-face b/c ultimately, it's faster and cleaner. BUT…I cannot get it to work in IE or Chrome…and I've followed all the .eot info, etc.

What am I doing wrong?

Thanks for your help!

Hi,

Many thanks for your article, when i tired the sample code of yours with the corresponding font files its worked well in local system. when tried to use my fonts ( i used the thesansplain-black etc… ) its not even working in firefox. what will be the problem here ?

Hi Paul,

Thanks for share all this precious information with the rest of us. It has been most helpful.
Unfortunately, I have been incapable of debugging a weird problem on Safari. On my web site http://www.workingbruno.com, if the page isn´t on cache, you will *not* see the declared font-face, but an alternate rule provided by Modernizr a small javascript library that you surely know… I´m quite lost on this one… don´t know if it´s a browser bug, a Modernizr problem or simply my mistake.

Have you any insight on this?
Thanks for your time.

Best,
B.

There is one thing I am not clear about. I have a font in four different variations, say
- font-regular.otf
- font-italic.otf
- font-italic.otf
- font-bolditalic.otf
plus their .eot equivalents.
The style sheet would then look about like this

@font-face {
  font-family: 'The Font';
  src: url(font-regular.eot);
  src: local('font-regular.otf'), local('The Font'),
  url(font-regular.otf) format('opentype');
}

@font-face {
  font-family: 'The Font';
  src: url(font-bold.eot);
  src: local('font-bold.otf'), local('The Font'),
  url(font-bold.otf) format('opentype');
  font-weight: bold
}

and so on.
When I do this, only the last rule is taken in account. What would be the right way to do this?

Thank you for your time

Dieter

Is there any way to use @font-face in a Blogger blog?

just wanna say that chrome 0.3 support svg font

it seems otf are not working on opera 10
only ttf – am i right?

I created a web page, and I want to use the French Script MT font. Can you help me to use the @ font-face (how to write the code)for the French Script MT font?

Here's to confused and lazy!

I think I've found a way round the problem of IE downloading the font, even when it's already present on the system.

I'm working on a site for a client right now and am using a fairly widely available font (Arial Narrow). However, some older systems don't have it – my Win2K test system, for example. I therefore didn't want every Internet Explorer user to have to download the font just on the offchance they didn't have it already.

The solution I ended up using was a mix of Javascript and the CSS rules already described. First, I made a regular CSS file, with the following:

font-family: "Arial Narrow", "ArialWeb", Arial, Helvetica, sans-serif;

Next up, I made an additional file called webfont.css, and put in it:

@font-face {
  font-family: 'ArialWeb';
  src: url('arialnarrow.eot');
  src: local('Arial Narrow'), local('Arial Narrow Regular'), url('arialnarrow.ttf') format('opentype');
}

Step three: I grabbed the fantastic JavaScript font detector, available here:
http://www.lalit.org/lab/javascript-css-font-detect

Step four, I wrote a little JS to get called when the page is ready:

var font = new Detector();
if(font.test('Arial Narrow') == false) {
	var cssload = document.createElement("link")
	cssload.href = "http://mysite.com/webfont.css"; // This may not need to be absolute path, I just made it one 'cos it was easier
	cssload.rel = "stylesheet";
	cssload.type = "text/css";
	document.body.appendChild(cssload);
}

…and that's it! If the font is already on the user's machine, it'll display because it's been declared in the regular CSS file. If it's not, then the JavaScript will include the web font (for IE or other browsers), and the second font declared in the regular CSS file – our web one – will then get used.

The only problem is that there's a brief flicker of the old font before the new one appears, as it's being loaded at the end of the document. Any suggestions much appreciated!

I do not seem to get it working with the latest build of chrome. Site works fine with IE and Firefox on several test machines. Anybody has the same problem?

thanks for the code guys. please can the various vendors now play nicely on some kind of a standard, or at least support multiple formats. i use sifr quite often and it just feels like a slow hack to me. i'd like to see embedded fonts getting traction.

my main issue aside from the code is the legality around font licensing. let's face it, no open source fonts really compete with the diversity of the established foundries.

found a helpful online facility to generate woff, eot and svg versions if anybody needs a pretty frontend that does it all.

btw, paul, checked out aurgasm. what a rad site – keep up the passionate work.
http://www.fontsquirrel.com/fontface/generator

@Diederik
chrome & iphone = svg
ie = eot
ff = woff

@murraybiscuit
sorry, just saw the font-squirrel link. scratch that.

font-family: helvetica,arial; /* ftw */

@Paul Irish

When using multiple styles and weights, it's worth including font-style:italic; and/or font-weight:bold; in the @font-face declarations for bold and/or italic fonts, even when assigning each file to its own font-family. Without this, using CSS to assign italics or bold will result in Firefox 3.5 to make an italic face oblique (yay, slanty italics) and to make a bold face extra bold.

(Of course, if you don't want to bother providing bold and/or italicized text to browsers that don't support @font-face, then resetting everything to normal weight and style will have the same effect.)

The permissions error will also show up in Firefox for Mac if you've got a font on a separate partition, in my case, for Boot Camp.

Very useful….nice & clear thanks

Nice article. Shame there's no decent support for converting fonts for IE on Mac yet. Not that I can find anyway.

Fontforge http://fontforge.sourceforge.net/ is available for Mac as well as for Windows and Linux. The interface is pants and it requires X11 but it has a lot of functionality.

@Paul Irish
For what it's worth, it appears that Opera 10.10 doesn't have problems with font-style or font-weight.

@Paul Irish
That's a good shout. I didn't want it slow the page loading, but then I guess it makes more sense for it to take a second longer to load the page in the first place than to do the nasty flash! Liking the approach to calling the font-face file as well; anything that cuts down on server requests is always to be supported!

Thanks! I was looking to for a tutorial for embedding fonts!

i am using the same technique for “myriad pro” but not coming in any browser. I have already uploaded eot & ttf files on the server and calling them…..please help

Am I just imagining this somehow? All of my tests have confirmed it but none of you bloggers have mentioned it..

If the name specified in font-family:'name'; is not the real name of the font then IE won't use the font when you assign that font in a style rule. At the very least, this makes the character limit a potential problem. It also means that FF will use their local font if it exists, even if you don't specify any local sources, because if the font-family: = "the real name of the font", and that font is installed on the system, then FF will use the local font.

Am I missing something here? Can anyone else either confirm this (so I know I am not just losing my mind) or prove it wrong (and wake me up from this strange dream).

I also can not understand why any of you would want to use local fonts at all. Haven't you ever encountered messed up fonts installed on people's computers? They are not actually all that uncommon. And with @font-face inspiring many inexperienced people to start doing their own font conversions, the number of messed up fonts in the wild is only going to increase.

I checked on some of the browser screen capture services and found a good number of their systems to have faulty fonts installed. Most of the screens looked perfect but in some cases my font was clearly being used but it had a different Q and K. On a different test with a different font a few of the test systems showed bold instead of regular (not a browser rendering difference, clearly the bold version of the font), and I had only defined one font and not defined any styles. The only place the bold version could have come from is their systems.

I have seen such messed up fonts many times while working on other people's computers and always wondered where they came from. Using the Font-Squirrel converter to convert fonts, often produces such fonts where the italic version is named "regular" and the bold version is named "italic" or other such funky naming issues. A good number of their pre-packaged @Font-face kits also have such issues. I have also run into similar naming issues using other font conversion utilities.

This is not so much an issue for me at the moment because right now I am not using @font-face in any professional work (I would like to, but there are still to many wrinkles), and the personal project I am putting together only uses fonts that I personally created and I know for a fact that no local sources will exist.

Don't get me wrong here, I don't mean to cast a bad light on Font-Squirrel or anything. I love what they are doing and in time I am sure all of these issues will be ironed out.

@Lampica Are there any specific examples you can cite? I did not know that there were problems like this. Thanks!

Hi Font Squirrel,
I've been out of town for the past few days. I should be home tomorrow or the next day, at which point I think I can give you a couple specific examples.

I'm very new to web design. Still attending CC for my certificate. I have an html doc that dreamweaver was used to create & has some inline css for the fonts chosen. Font in a red suit for 1st choice in size 36 no headings, 2nd choice is papyrus bold no headings for the title. I have a small amount of text that I only want to be in papyrus bold. I can't seem to figure out where to place the @font-face code etc. or what exactly it should be, even after reading & re-reading every single piece of info on the web. I think I might need someone if at all possible to look at my code. I used the drag & drop features of dreamweaver to create it, because I am just not good enough at writing the html yet. I can't use external style sheets because this is for en ebay template. eBays system is copy & paste for html. So once again my css is inline. I've tried dropping the font files into the font generator from fontsquirrel , but just keep getting an error with a red X in a box. Some of my text was done in photoshop because that text wont ever change so I made it part of the images. But some text will need to change on a regular basis, & also needs to be searchable through tags in eBays system so it can't be an image. How can I find out what the exact code should be & where to place it in the html doc? Thank you for any assistance! Stacey

Update, finally got the font squirrel to generate the zip files, but when I open the demo.html the font doesn't display correctly. When I try to open the .eot file it wont open in IE, neither will the .svg or the .woff, only the tff opens in firefox & displays correctly. Not sure what to do with the css files, except maybe copy the code into my html file, but where to place it exactly, since I'm using inline I'm not sure? Thank you for any assistance, Stacey

@stacey
I would be willing to help you out for free, but I suggest you go post your question at http://www.codingforums.com/forumdisplay.php?f=13 as it will be much more convenient and appropriate for me to help you there. Just create an account there and then post your trouble in the html/css section and I will see it and help.

@Lampica
Thank you for your response. I will go to the link you provided within the next couple of hours. I found out a little while ago, that I need to use embedded CSS. Still not sure how it should look code wise. But will fallow your request shortly. Thank you!

@Font Squirrel
Finally made it Home (a week later than planned). I guess I'll drop you a line through the contact form on the Font Squirrel website and give you some examples among your @font-face kits.

@Lampica
Just wanted to let you know that I did as you said, but was asked to post my question in the private message utility per Apostropartheid, who said she deleted my original post to you. I will repost in the private utility.
Stacey

@Lampica
unable to send you private message @ codingForums.com because they can't find you as a user.
Stacey

@Lampica
Cant post in private utility as system doesn't recognizance user.

@Lampica
cant send you private message cause system doesn't recognize user

@Lampica
just wanted to let you know that I did as you said, but was asked to post my question to you somewhere else, Apostropartheid emailed me back & said there is no user named Lampica & removed my post. Not sure what I should do? I didn't see the reply button until now.
Stacey

Ok, just post it as a general question on the forum. Forget about Lampica. I am not always Lampica. Rest assured, I will see your question, it does not need to be addressed to me specifically. And please relax and give people some time to reply before posting multiple times. It may take me a couple hours – or it may take me a day or two, as I'm very busy. Just be patient though and I will do my best to help if I can.

@Lampica
sorry, there was some sort of system error, none of the posts were showing up, after several hrs. so I didn't think any of went through

U have a REALLY weird thing, maybe someone can help me?
I have a website which is divided into and hosted on two domains: http://www.qqleq.nl and http://www.filmmaken.nl. Hosted with the same provider and as far as I know, on the same apache system. Now I made this simple test.html file (see below). It uses the font files on http://www.filmmaken.nl. The test file works on (the latest) FF, but in (the latest) IE it works only on http://www.qqleq.nl, but NOT on http://www.filmmaken.nl. Also not if I make the font files local. Also not if I add an .htaccess file as suggested on some websites. How can the SAME script work on one domain and not on the other? I emptied the browser cache, no result. You can see the two identical files on http://www.filmmaken.nl/test.html en http://www.qqleq.nl/test.html . Does anyone have an idea?

<html>
<head>
<TITLE>This is a test</TITLE>
	<style type="text/css">
@font-face {
  font-family: 'Adler';
  src: url('http://www.filmmaken.nl/fonts/adler0.eot');
  src: local('Adler Regular'), local('Adler'), url('/fonts/adler.ttf') format('truetype');
}
 
H1  {
	background-color: black;
	font-size : 16pt;
	font-family : Adler, sans-serif;
	color : #ffffe0;
	border-style : solid;
	border-color : Green;
	border-width : thin;
	line-height : 1.5;
	margin-bottom : 0;
	margin-top : 0 ;
	padding-left:20 ;
	padding-top: 3;
}
</style>
</head>
<body BGCOLOR=black TEXT=WHITE LINK=YELLOW VLINK="#FF8000" ALINK="RED" >
<h1>Hallo</h1>
</BODY>
</HTML>

Hy Guys, Hy Paul,
I really like the attempts made here.
Just one thing that bites me.
Firefox < 3.1 supports SVG. Isn't there any way to enable the SVG-Text rendering for Firefox < 3.1?

Hey Paul.

The 'smilie' trick quite clever. Never would have thought of that. I don't know whether the case of having several fonts with the name is common or not, but I'm sure it happens every now and then. This seems like a great way to prevent this special case – I wonder how often it happens.

Z.

Paul,

Thanks for the great work. Please take a look at this issue with Chrome, first reported on doctype.com. In some cases, it will be worth adding a few extra lines to enable synthetic bold/italic transformations to Chrome.

Hi Paul:
I'm trying to learn this and came up with the following:

@font-face {
font-family: 'myfontname';
src: url('http://www.mywebsite.com/font/GOODTIME.eot');
src: local('GOOD TIMES')
url('http://www.mywebsite.com/font/GOODTIME.ttf') format('opentype');
}

I have the eot file and ttf located as above. The problem is that it works in IE8, but not Firefox 3.6. I tried to find out where IE is getting the font, but it disappears if I simulate a typo error both in the first URL *or* the local font name. Can you help?

I'm confused by the references to the "font-variant" descriptor. According to the current CSS3 font spec for the "@font-face" rule (http://www.w3.org/TR/css3-fonts/#font-resources), the only valid descriptors in a "@font-face" rule are:

font-family
src
font-stretch
font-style
font-weight

"font-variant" is not listed.

Undoubtedly, "font-variant" would be extremely useful. Are some browsers simply supporting this as an extension to the "@font-face" rule, or is there something I'm missing in the spec?

"font-variant" definitely does belong in element styles; I was assuming all the talk here was about using it in @font-face rules, which would be very useful for small-caps font files. I'm not sure why it's not in the CSS3 spec, considering the browser can choose a small-caps variant from system fonts; we should be able to provide a small-caps variant in @font-face rules.

@Mike G
You are missing a comma after local(). That should fix it for FF as long as there's no problem with the TTF file – but if you created an EOT from it, it should be fine.

@dean hall
Font variant doesn't belong in the @font-face declaration. And stay away from font-stretch. No meaningful support as yet.

rich

Hi Paul,
first & foremost I thank you for sharing this valuable property with us. I do however have one concern about it.

I still see web designers/developers using sIFR/cufon rather than embedding fonts straightaway.

Do you mind sharing demerits of 'font-face' with us?

Paul, I'd like to make a correction. You state: "The one catch is that Safari on OS X will use only the Postscript name instead of the full font name; so when they differ, include both names"

This is not really true. Safari only supports specifying the font-FAMILY name in a font-family declaration (and as a fall-back, the PostScript name for cases where the other CSS font-* properties cannot select the face you want, such as an ornaments face).

Your code as follows specifically says "Graublau Web Regular" which is a face name and not a family name, and should in fact not work in any browser unless you have a "Graublau Web Regular Regular" face installed! The actual family name is "Graublau Web", which is why the second match succeeds.

src: local('Graublau Web Regular'), local('Graublau Web'),

The font family name in Safari is exclusively determined from the NameID code 1 (family) as listed here:
http://developer.apple.com/textfonts/TTRefMan/RM06/Chap6name.html
NameID code 2 (face) is not used for matching CSS font-family properties.

E.g. for PlatformID=1:
1="Graublau Web" 2="Normal" -> font-family: "Graublau Web"; (the base face for a family)
or 1="Arial" 2="Narrow" -> font-family: "Arial"; font-stretch: condensed; (an alternate face)
or 1="Arial" 2="Rounded Bold" -> font-family: "ArialMTRounded-Bold" (PostScript name to select an otherwise unselectable face)

Note that IDs 1 & 2 are the 'ordinary' family/face names, and on the Mac (PlatformID=1), a family can have unlimited numbers of faces. On Windows, historically a family can only have Bold and/or Italic faces, so some of what is really the face name has been pushed into the family name, e.g.
PlatformID=3
1="Arial Rounded"
2="Bold"
To compensate for this, name tables can now contain PlatformID=3, NameID=16 & 17 names which should contain the same values as the PlatformID=1, NameID=1 & 2 values (but obviously with different encodings).

Also, to follow up on a comment just above: font-variant does belong in @font-face delcarations, and its omission is an error. There needs to be a way of saying "this is the small-caps face for family WhateverFont".

this simply isn't working for me. here is what i have in the stylesheet.

@font-face {   
   font-family:'fatboyslim';   
   src: url('/fonts/fbsbltc.eot');  /*IE*/
   src: local('Fatboy Slim BLTC BRK'), url('/fonts/fbsbltc.ttf') format('truetype'); /* non-IE */  
}   
.fatboy {
	font-family: fatboyslim , verdana, helvetica, sans-serif;
	color: #0033CC;
}

and in the html i have an unordered list with list items that have the fatboy class. any help would be appreciated. I am testing in IE8 and FF3.5 on my local machine.

Has anyone got @font-face working on iPhone Safari? People claim to have made this work, but when viewed on device no custom fonts are used… Can anyone point me to a working example??? Love to find one as I am beginning to believe this is not actually possible!

 
@font-face {
	font-family: "MistralRegular";
    src: url("../type/Mistral.ttf");
    src: url("../type/Mistral.eot");
    src: local("MistralRegular"), 
    	 local("Mistral"),
         url("../type/Mistral.svg#Mistral") format("svg"),
		 url("../type/Mistral.woff") format("woff");
	}

My approach has been to load the "ttf" directly for Firefox, as IE will skip over "ttf" and use "eot" and the rest using local lookup for mobiles using "svg" and modern browsers using "woff".

note there is a Safari bug with @font-face and having the following line in your css:

@CHARSET "UTF-8";

(fonts generated with font squirrel)
only 1 font is loaded (if using several fonts) and is inconsistently displayed

@dubbs
I'm struggling to get an SVG forn working on the iphone using font-face. I have seen an example that works but try as I might mine doesn't. I can only assume it's to do with the font?

Hi i have tryed out your cool font-face but i cant get to work in IE it workes fine i Firefox but not in IE i hade some trouble that the mime type wasent declared in IIS but i solved that..

Please help …

here is my CSS

/* IE */
@font-face{font-family:BellyBold; src:url(/_css/fonts/BellyBold.eot);}
@font-face{font-family:BellyBlack; src:url(/_css/fonts/BellyBlack.eot);}

/* non-IE */
@font-face {
font-family:BellyBold;
src:url(//:) format("No-IE-404"),
url(/_css/fonts/BellyBold.otf) format("opentype");
}
@font-face {
font-family:BellyBlack;
src:url(//:) format("No-IE-404"),
url(/_css/fonts/BellyBlack.otf) format("opentype");
}

h1
{
    font-family: 'BellyBlack', Tahoma;
    font-size: 30px;
    line-height: 21px;
    color:#333333;
}

Hello ill get to work when i check the html file localy on my coputer but when i set it up on the server it wont work..

Any ideas??

So an issue I ran into, is that I had (apparently) two different copies of a font on two machines and when I loaded up firefox one machine would load the Local font and the other would load the remote font. The one that rendered the Local font was rendering the font different. So my question is, instead of having firefox immediately render the Local font if it is install, can you have it render the remove one, and if that fails to default to the local font?

I managed to get the @font-face working on iPhone Safari taking Paul's advice and it looks great.

Hi Paul,

this article is amazing, thank you so much.. can't wait to play with this soon. And by the way, can I use this excellent script in in the background that is adictive for drawing.. on my site ?

.k

it is not a perfect css code, try on the epiphany browser (gnome). He dont eat it.

 
/*IE*/
@font-face {
 font-family:myindiunicode;
 src: url("fontface/myindiunicode.eot");
 src: local('myindiunicode Regular'),local('myindiunicode');
}
/*NON IE*/
@font-face {
 font-family:myindiunicode;
 src:url(//:) format('No-IE-404'),
        url(fontface/myindiunicode.svg#myindiunicode) format("svg"),
        url(fontface/myindiunicode.TTF) format("truetype");
}

after lots of trial those combination works for me in ie, ff . In chrome combination characters ( I am trying indian unicode font having support of combination characters) are broken.
while it is quite fine in IE and FF. I want to make the code such a way that if the browser dont find that perticular font in visitor machine it will load those font face file and if the font is available in visitor's machine . it will laod the font from the visitor's machine.
1. plz guide me which will be the best code for it ?
2.how to rectify the problem with chrome ?
3. I have make files from frontsquirrel, my all files are too big this is also one of my concern.
thanking you

I managed to minimized those file size by subset the font character codes. I want to make browser to check for the font available in the visitor machine, if font available in visitor's machine .. then it will not load the eot/svg/woff file and will use the visitor's machine font in stead of it ( I will put a link for the fonts in the site) so which will be the best suitable option for me ? plz also mension abt the svg file do I have to put is for rendering it in chrome ?
thanking you ..

Why Google Chrome can't render my font?

@FontNotVisible
you have an extra space behind "fatboyslim" in the class .fatboy properties.

Having attempetd to run the code output by FontSquirrel I noticed that if you're on a Windows server then IIS doesn't have the mime types for SVG and OTF set by default, resulting in those files not being found – even when they're there. If you add the mime types via the MMC and either restart IIS or wait for the App Pools to recycle that seems to resolve it.

Hi,

I used FontSquirrel, and it doesn't seem to work on Safari on a Windows platform. I'm using Windows XP SP2, so haven't tested nor on Vista nor on Windows7 though.

Not much of a issue for myself, but thought i mentioned it.

@Wieland

After testing on Vista and W7, it works on Safari on these platforms. So really not a issue. Thanks for the article btw!

Hello!

Please, I need your help! It's urgent!

In my blog, I changed the blog title font "Verdana" to "Titillium". I'm spekaing of the code "font-face". Many fonts as those, in the Fonts folder in my own computer. Did you understand? I also changed the text font and text title to the fonts that don't exist: Titillium, Calibri, Segoe Print, Segoe Script, Lucida Sans Unicode, etc.. On my computer, the fonts exist. But when I went to cyber café or "LAN house", to see my blog, the fonts of the blog title, text and title text, etc. did not work, because the other computers those fonts din't exist or appear exactly, or those fonts were not installed in the Fonts folder of the other computers. At the blog, accept, recognise and there are only six fonts, including Comic Sans MS, which already existed and was installed on all computers. So how do I install the fonts in my own blog for that the fonts work on all computers that do not have those fonts? Then @font-face doesn't work!

I know you counsel me not to use those fonts, but only the standardised fonts by the Blogger. But see the text at the site of FontsQuirrel, the fonts there work perfectly althought I don't have these fonts, but I know what the font are these!

How do I put the CSS @font-face? Where do I find it in my blog's HTML?

Kevin

Chrome in Windows appears to stop rendering my font whenever it sees an 'e' character for some reason. Works fine in Chrome for OS X and every other browser on both OSes. Any ideas? The font is 'Birth Of A Hero'.

TWO SMILEY VARIATION. Avoid problem with Gnome browser Epiphany:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('?') format('?'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

When I use the smiley method in my .css, I get this message in dreamweaver:

"The document's current encoding can not correctly save all of the characters within the document. You may want to change to UTF-8 or an encoding that supports the special characters in this document"

Then when I reopen the file my smiley face is now a question mark.

Even when I declare this at the beginning of the css:

@charset "utf-8";

it still won't save with the smiley. Any ideas?

Hi,

On IE7 users always get a security warning. Any way around that? Can we target IE7 out and use sifr for them?

-Chris

Thx a lot !!

It has been hard but it's done !! I'm on walkway bold thanks to you !

aby

Really great article,
but the smiley way doesn't work when you use iso-8859-1.

Got one for you all.
In Opera 10.60 build 3445 the @font-face works fine…
until I refresh the page and the text goes back to system fonts.
if I press enter on the address bar it comes back, but any amount of refreshes always gives system fonts and the address bar gives @font-face fonts. weird huh.

forgot to say in I.E. it works fine on refresh and with @font-face.
in firefox it works fine on refresh and with @font-face.

In IE and firefox it works fine.

10.61 the same

hello,

I want You all to know that the @font face generator have and error.

A PHP Error was encountered

Severity: Notice

Message: Undefined variable: demo_data

Filename: views/downloadable_demo.php

Line Number: 58

I cant generate a @font face.

Thanks the generator is so helpful.

Hi Sir, I just want to ask for any help or advice with regards on how to make my fonts appear.

I followed every step in the above mentioned post. But it doesn't seem that I am getting it all right.

I don't know much of HTML and CSS so i tried to copy formats from several websites including yours that uses embedded fonts.

I would really appreciate your help. Thanks.

Awesome backgound Man!
Great post…

@Paul Irish
I'm always very keen on following these kind of clever advises, as I am not really an expert in CSS matters. But I did notice this: after cutting/pasting the smiley into my stylesheet, I had to save it in Unicode instead of ANSI, and it now takes twice as much space on the server – and therefore I assume twice the time loading? So for performance maybe it is better to have the question mark in ANSI, instead of the smiley? Or is this a really stupid and unnessacery remark?

@Marijn

Well firstly I have never heard of people saving in ANSI instead of Unicode for performance reasons… I'd love to see more details to verify it is legit..

But you can do a ANSI question mark and the smiley has the same effect, basically. Not a huge deal.

Hoping someone can help me out..
I have used the double declaration method
my combined (eot + ttf) font size is 23k total..
1. Should I be using the bullet proof method ?? (compatibility)
Opera, Chrome and FF even IE all looks fine !
(so I am not real worried about double downloading files if that's all it is.)
2. Only problem I have is the 'font flash' before the fonts download..

my font is set 51pt to display as I want 'once' loaded..
the problem is my custom font face is small compared to default fonts..
so yhis results in a BIG flash..
so without resizing the glyphs in the font itself.. is there anyway to use CSS to set this not to happen.. ?

I don't mind the flash initial showing a smaller size lettering then once files download showing.. increasing in size ..
As is said if the font is slow loading it's a big flash..
easiest to look I guess..
http://www.absoluteclassdiscos.com
I think I may be stuck resizing the whole font to prevent this.. but worth an ask..
Thanks
Andy

@komsas

Yeah, epiphany doesn't take it.

no dates on comments? last is latest?

yup. but would be nice to know when the conversations happened ;)

Great Article. Maybe FF needs conditional comments :p

Is there a way to have FireFox NOT load the CSS3 web fonts since it can't load them right to begin with? I would rather have my users see the fallback font over seeing a page the flickers on load!

Excellent post, really useful.

Excellent post guys, really useful.

My tests continue to show that this, so far, is the only syntax that doesn’t leave Opera choking. And, in keeping with Jon Tan’s oft-linked-to code that recommends dividing the declarations between IE and “other browsers” using conditional comments (which I think is a good idea – almost inevitable), something needs to be done to prevent IE from making unnecessary HTTP requests resulting in a 404 as it attempts to parse the rules for the “other browsers”. I also continue to not like being forced to use local() because it serves a hidden purpose other than it’s intended one.

It’s very helpful for those trying to use @font-face to know at least a little bit about what’s going on under the hood with different browsers a

It doesn't work in IE. Rest of the browsers do work

added CSS:

@font-face {
font-family: 'Name_Font';
src: url('themes/Theme/fonts/Name_Font.eot');
src: local('?'),
url('/themes/Theme/fonts/Name_Font.ttf') format('truetype');
}

HELP would be great!

Wonderful post. This information very useful to me for web design. Thanx

Its very perfect code. Keep going on nice job

It's not as bulletproof as it seems. Doesn't work in wkhtmltopdf (that's a Webkit PDF renderer). It's either the local or some other non ttf declarations that break it.

Are these fonts used in all browsers if the page is printed?

The animated background? Really? Accounts for 94% of the resource usage of my seven firefox tabs currently open. Merry crashmas is more like it.

Nice article. front-end developer, this background sux at all.

Wonderful background. its very beautiful. I like this article.

Paul ~ just wanted to mention that we've had an instance of the Safari permission error on a machine without a font manager, such as FontExplorer. I wonder if you have a theory on that? Hope SF is treating you well!

Thanks,It has been hard but it's done. I am fresher in web design field. This article really help me.

Thx Paul! Your @font-face syntax is the best and I'm using almost daily. at the beginning of 2011 I will publish an CSS book and it will include font implementation of course, based on your @font-face syntax. And of course, you will mentioned! Greetings and have a nice X-Mas!

How to use in css font-weight: crisp, sharp, strong, smooth? In photoshop this style are available, how can i use?

Bibhuti, those aren't things you can declare using font-weight. They're anti-aliasing methods.

@Andrea Giammarchi

Great article! I'd just like to add my code which covers all of the main browsers and devices. Hope this helps.

@font-face {
font-family:'FuturaEmbed'; /* we can name this whatever we want */
src:url(Futura.eot); /* IE will download this anyway */
src:local('Futura'), /* It'll ignore this.. */
url(Futura.woff) format('woff'),
url(Futura.ttf) format('truetype'),
url(Futura-book-webfont.svg#webfontFGT2JwHV) format('svg');
font-weight:normal;
font-style:normal;
}

Thanks a lot for sharing your methods of using @fontface with the popular browsers. It's quite funny how much difficult it all used to be.

This doesn't work with arabic fonts that use extended character base. the font squirrel website also doesn't embed arabic language characters. is there any way to get the arabic unicode fonts work?

@alhamd

For use with Arabic fonts then you should also include AAT format (truetype-aat) and OT format(opentype) for both Mac and PC.

src: url(LateefRegAAT.ttf) format("truetype-aat"),
url(LateefRegOT.ttf) format("opentype");

.eot# not working for me in IE9 (everithing else works fine)..

Good overview.

One question: I have a javascript toolkit that include 5 custom fonts defined according to your reccomendations using a set of definitions in custom-fonts.css like:

@font-face {
font-family: 'pgn4web Liberation Sans';
src: url('LiberationSans-Regular.eot');
src: local('Liberation Sans Regular'), local('Liberation Sans'), local('LiberationSans'), url('LiberationSans-Regular.woff') format('woff'), url('LiberationSans-Regular.ttf') format('truetype'), url('LiberationSans-Regular.svg#LiberationSans') format('svg');
font-weight: normal;
}

Then the user of the toolkit imports custom-fonts.css in his css and has all new fonts available.

Those fonts are *available* to the user of this toolkit, they are not necessarily all used.

This works fine with all browsers, as usual, except IE.

I have the *impression* (could not confirm though) that IE is downloading all the eot files when they are defined in the css while other browsers only download the font files when they are used. So, if a given site uses only one of the several fonts defined, then IE will load all font files anyway while the other browsers load only what they actually need for each page.

Is this the expected behaviour?
If yes, is there a way to make IE download the fonts only when actually used?

maybe you can help me with this, it seems like no matter what syntax I use my fonts get bolder in the browser than they appear in illustrator. I’ve looked everywhere for people having this issue and haven’t found anyone writing about it. Have you seen this? here’s a screenshot showing the same font in illustrator and on FireFox: http://files.mimoymima.com/drop/font-weight.png

@Paul Irish
I spent most of today figuring this out, and posted similar posts on other blogs trying to see if anyone had a solution. The reason I didn't give up after your comment is that the font squirrel 'test' page looks correct, whereas mine had extra weight. I stripped down my site to the bare bones but still was getting the same issue, the only difference was the background and font color, so I changed it the problem was gone! It's hard to believe, but the same exact code will render different antialiasing with different foreground and background colors. In the attached screenshot notice how black on white looks like a light typeface, whereas white on black gets extra weight to like 'book' even though it's actually 'light'… I even overlaid the two so you can see the extra weight, it's pretty substantial! I'd consider this as a bug, but it does this in firefox, chrome and safari on my mac…

http://files.mimoymima.com/drop/font-weight2.png

so is this a bug? if the browser can render the font correctly with a white background why can't it do the same with black!?

@Brent Lagerman

nevermind, I just double checked my screenshots and although it definitely appears to be bolder with white on black it's just an optical illusion, it does use the same antialiasing, just appears bolder, the overlapping screenshot I made shows white outside of the black but that's just because of the brighter color, not different anti-aliasing, false alarm…

Using the Fontspring @font-face syntax, pre-generated from Font-squirrel and it is trying to load the TTF in the latest IE9 (RC). Obviously, TTF font files do not work on IE, and so it fails to work. So far, the only fix I have found was to change the format('eof') in the src to format('truetype') and then IE9 downloads the correct EOF file. It also seems to work in the other browsers, downloading the appropriate file despite the format being wrong on the EOF file.

I don't like the fix though, afraid it could cause issues I haven't found in other browsers, any other suggestions?

(I do need to double-check my mime-type settings on the server yet, hoping I will find that to be the answer.)

This is what I am currently using – note the iefix line has an incorrect format:

@font-face { 
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?iefix') format('truetype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');
    font-weight: normal;
    font-style: normal;
}

Strange thing happened with Opera 10.53 as i tested font-face declarations.

@font-face {
font-family: 'QlassikBoldRegular';
src: url('fonts/qlassikbold_tb-webfont.eot'); 
src: local('?'), 
url('fonts/qlassikbold_tb-webfont.woff') format('woff'), 
url('fonts/qlassikbold_tb-webfont.ttf') format('truetype'),
url('fonts/qlassikbold_tb-webfont.svg#webfontD6qDCYGS') format('svg'); 
font-weight: normal; 
font-style: normal; 
}

This didn't seem to load the font files and opera rather used it's own default font. I don't know if this is a known bug but if i change the first letter from "QlassikBoldRegular" to another Opera loads the font and works like a charm.

Thanks you SO MUCH!!! This has been incredibly helpful,

I found that in FF 3.6.15 on Mac OSX my CSS @font-face declaration needed to use double quotes throughout instead of single.

Ref: http://stackoverflow.com/questions/1279735/font-face-isnt-working-in-firefox-3-5

Cheers,
Mark

Okay, so I'm using the bulletproof smiley syntax and while I understand how it works I can get it to work in EVERY browser except IE browsers.

Can someone check my style sheet here and tell me if I'm doing something wrong?

http://www.1stchoicerecyclinghvac.com/css/style.css

Oh, and here is the website in question… http://www.1stchoicerecyclinghvac.com

The site is by no means done but if you're using IE you will see the fonts don't show up at all and I can't figure out for the life of me why.

it not work all bro.
only working in Mozilla fire fox 3.6+
my css is :

@font-face
{
font-family: myFont;
src: url('AlQalamQuran2.ttf'),
url('my site/AlQalamQuran2.ttf') format("truetype"); /* MF */
}

@font-face
{
font-family: myFont1;
src: url('AlQalamQuran2.eot'),
url('my site/AlQalamQuran2.eot') format("opentype"); /* IE */
}

@font-face
{
font-family: myFont2;
src: url('AlQalamQuran2.otf'),
url('my site/AlQalamQuran2.otf') format("opentype"); /* chrom */
}

place help me .thanx

Have you noticed that if you do the shorttag and link to fonts.google.com it is litterally just an @font-face you are importing? Just follow the url and copy/paste the css into your own stylesheet like here is the best way.

Thank Average Gamer.
It works well on Firefox

Jimmy

I read you blog regarding the @font-face, that was so nice….

I tried to use the "HeliosCond Bold" font family….
But It does not work in Safari and other browser are working well…

so Kindly suggest me….

Thanks,
Aravind.

In FF<4 font looks bad because they not have antaliasing – right?
You can fix this with text-shadow:

text-shadow:0 0 1px XXX,0 0 1px XXX – where XXX is font color :)

I read you blog regarding the @font-face, that was so nice

Hey Paul…
Could really use your help here – I cant get the custom fonts to work in IE7 and IE8, and cant quite seem to figure out why…

Would really appreciate if yolu could take a look at it: http://i-creative.dk/iJob/

i read your article about @font-face, i try it but i could not gain result for safari browser..

Your example
http://dl.getdropbox.com/u/39519/webfontsdemo/index.html
does not work in Opera 11.11 at all!

And FontSpring's "New Bulletproof @Font-Face Syntax" behaves in Opera 11.11 very strange – some final letters and all digits disappear.

Very Informative article about @font-face but
http://dl.getdropbox.com/u/39519/webfontsdemo/index.html
does not work in opera. some letters and digits disappear.

@Karis
i agree but waht to think about dissertation help

Wonderful background. its very beautiful

Still can't get @font-face to load in IE9 or FF 3.0. Is there any chance there's an incompatibility with HTML5 Boilerplate?

I'm using HTML5 Boilerplate, and the following code is in the "primary styles" section.

@font-face {
font-family: "ChunkFiveRegular";
src: url("Chunkfive-webfont.eot");
src: local("☺"),
url("Chunkfive-webfont.woff") format("woff"),
url("Chunkfive-webfont.svg#webfont90E2uSjN") format("svg");
}

Any help would be greatly appreciated.

Thanks!

Hi!

Everybody its a great blog on @font-face .. but can some one tell me how to add this beautiful background .. i want to use this background in my work.. any help ..

I apologize cause im talking something not related to topic, but i cant resist the beauty of this background

Hey Paul, i've tried different solutions such as "Bulletproof @font-face: Smiley variation", "The Fontspring @font-face syntax", "The local reference" but i can't get ie9 to load the font while it works all fine with ie8. The only solution i came up to is to load the eot font for ie within the special stylesheets with another @font-face. Works but loads the font twice for ie, the ttf and the eot.

Any clue to get it all fine? Or am i doing something wrong with the Fontspring syntax?

Pb fixed, i used the declaration fom fontsquirrel.com and it's all fine.

Old Internet Explorers – not working – NOTE: Modern/Advanced CSS selectors can 'trip' old IEs (8/7/6 etc). E.g:

h1, li:nth-child(2), p {font-family: myNewFont; } will also fail the H1 and P elements in IE8.

You might try the following instead:
H1, p {font-family: myNewFont; }
/*:root *> everything but IE6-8. (Not tested in IE5/4!)*/
:root *> li:nth-child(2) {font-family: myNewFont; }

I am not sure if it's just me but @Font-Face doesn't work in FF 2.0(Win). I am using Font-Squirrels fonts & code too. I know FF 2.0 is way too old now but I was just wondering. Does it not work in FF 2.0?

Thanks for this, useful stuff..having problems with IE9 though too

i want to use this background in my work.. any help!!

Thanks Paul.

Thank for this, it works for Khmer Font.

Very useful. I often have issues with w3 CSS validator, but your code works well !

good point ^^

Hi Paul

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:

@font-face {
 
    font-family: 'AvalonBook';
 
    src: url('Avalon-Book-webfont.eot');
 
    src: url('Avalon-Book-webfont.eot?#iefix') format('embedded-opentype'),
 
         url('Avalon-Book-webfont.woff') format('woff'),
 
         url('Avalon-Book-webfont.ttf') format('truetype'),
 
         url('Avalon-Book-webfont.svg#AvalonBook') format('svg');
 
    font-weight: normal;
 
    font-style: normal;
 
 
 
}

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?

Thanks for posting Paul, have been looking for a decent guide taking @font-face back to the basics.

Cheers :-)

advertising and *********** with Adwords. Well I am adding this RSS to my e-mail and could glance out for a lot extra of your respective fascinating content. Make sure you replace this again very soon..

Help! Is it possible to use @font-face in HTML email if I self-host the font? It would have to be an inline style since email ignores info in the tag.

@John
John- try adding the following to your css:
html{-webkit-font-smoothing: antialiased}

still no way of using DATA:uri for .eot? how can this be embedded oo i can have no extra http request. it can be used for the rest of the formats…

@Paul Irishthank you, but how data:;base64, encoding declaration will look like for eot. as there`s the ie fix ?'. do you have any example of eot encoded page? i have tried to convert an eot file, placed the characters but ie doesn`t parse it. For .otf in the rest of the browsers i can embed with dataLuri, but for ie still remains a request i want to eliminate.

Thank you for this great post on font-face! I think font-face is better than cufon

@font-face {
font-family: 'Meera';
src: url("fonts/Meera_04-1.eot");
src: local('Meera'), url('fonts/Meera_04-1.ttf');
format("truetype");
font-weight: 400;
}

is there any pbm with this css? its working on localhost if i give full url. but seems to be not working with nd without full url. me using wordpress

Font face looks really terrible!

Just checked FontSquirrel on Vista and trust me it working like magic!

I had strange effects on Chrome and Firefox!
So I used this because your solution only works with IE (for me)!
@font-face {
font-family: 'Candara';
src: local('Candara'), url('fonts/Candara.ttf') format('truetype'), url('fonts/Candara.svg') format('svg');
src: url('fonts/Candara.eot?') format('embedded-opentype'),
/*url('fonts/Candara.woff') format('woff'),*/
url('fonts/Candara.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Had a weirdness in IE9 while using four Lato fonts arranged as a family (ie: all with font-family: 'Lato', and font-weight, font-style set appropriately).

For some reason IE9 was using italic everywhere.

My colleague Richard managed to fix this by rearranging the order in which the @font-face declarations were listed:

Regular
Italic
Bold
BoldItalic

Hope this helps someone.

Awesome explanations and great discussion in the comments here. This has helped me a lot as I've been trying to figure out how to get cross browser compatibility for custom fonts on my site. Thanks!

Thanks for your clear explanation Paul!
Haven't read all comments, maybe this is already mentioned: I copy-pasted your code into a site I was working on. Fonts did show up in FF and IE but not in Chrome + Safari on Mac. I found out that this was because ; was placed after the first declaration. I replaced it with a , and now fonts show up in every browser.
So an ; only before the closing }.

Hi Paul,

How to make font stack like Crisp in Photoshop?

I make a font-stack:

@font-face {
font-family: 'GothamXNarrow-Medium';
src: url('fonts/gothamxnarrow-medium3.eot');
src: url('fonts/gothamxnarrow-medium3.eot?#iefix') format('embedded-opentype'),
url('fonts/gothamxnarrow-medium3.woff') format('woff'),
url('fonts/gothamxnarrow-medium3.ttf') format('truetype'),
url('fonts/gothamxnarrow-medium3.svg#gothamxnarrow-medium3') format('svg');
font-weight: normal;
font-style: normal;
}

But the result displayed on browser(FF) is not same to Photoshop.

Thanks

thanks for this comprehensive article
will try em out soon!

hello, thanks for the thorough explanation.
I am not sure of the reason but… has anybody had issues with the rendering using @font-face?
if I use the google api webfont loader, the typeface is rendered properly.
when the fonts are defined in a separate stylesheet via @font-face (but… that's what the webfont loader does too, doesn't it..?) the rendering is very poor (irregular strokes, different spacing, etc).

thanks

Hi Paul, great tutorial, you should check out Font Squirrel, they have a fortress of ready to use @Font-Face kits.

THANK YOU !!!
You guys simply Rock, I got so exited to see this work I had to go for a run around the block…no…seriously.
THANK YOU!

Also be sure to check out http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax for the update:
"We've reverted back to the correct format hint for eot, format('embedded-opentype') due to issues with serving on IIS."

The links doesn't work, but I assume it's about missing MIME-types for the font formats in the default server configuration.

I also like the ?#ie-fix – thing, since it wouldn't produce anything the server could interpret as a query string, resulting in another response than predicted.

your css seems to be working fine in all browse but while printing in Firefox the @font-face is not supported below is css

@font-face {
font-family: 'C39P24DmTtNormal';
src: url('WebFonts/v100025_-webfont.eot');
src: local('☺'),
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;
}

FYI:
Issue: @font-face wasn't rendering in IE7 on windows vista but fine in IE7 on windows xp and windows 7.
Solution: Use double quotes instead of single.

Who are still using windows vista and IE7? OMG