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>

hi!
i have a new windows 7 64bit computer and i cant see the @font-face fonts neither on my webpage, nor on fontsquirrel (in the fontdemo).
in no browser, for none of the 3 different fonts i tried.
apparently there is a problem with that, do you know anything about it?

sorry! im taking it back! its not in all browsers, just chrome. (the font on my website is wrong in all browsers, but i guess thats me ;-). still: anything known about this?

sorry! i take it back!
its only in chrome that fontsquirrel demo doesnt work.
while my webpage doesnt in any browser… ;-)
still, do you know anything about that?

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.