Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

xBrowser Fonts

Filed in:CSS
Web Dev·The Web

xBrowser Fonts

July 4th, 2009  · stk

For years, web designers and bloggers have been limited to a select number of "web-safe" fonts. With the Jun 30th release of FireFox 3.5, it's now possible for cross-browser font embedding using the CSS3 @font-face selector. Here's a tutorial to show you how

@font-face font hell

Expand Your Font Palette Using CSS3

In a tale involving proprietary font formats and a week-old release of FireFox, I'm here to say that using the CSS @font-face selector to spice up your website typography is an easy, light-weight, valid and cross-browser solution. Finally, fancy fonts for the masses!

Can this be true? You bet your sweet bippy! Read on.

 

History: The Web as a Typographic Wasteland

For the past decade, web designers have been limited to a selection of about 13 or so "web-safe" fonts. Out of hundreds of thousands of available fonts, this is a tad limiting.

While it's theoretically possible to utilize any font you want for a web site, in order for it to display properly, each visitor must have that particular font loaded on their computer. Because of this requirement, web typography has been a wasteland, limited to only a short list of commonly available (web-safe) fonts.

There have been several attempts to circumvent this problem and below, is a list of some of the most common. All have their short-comings and for me - no disrespect to very creative, determined and knowledgeable people - they all fall into the category: "life shouldn't be so hard"!

  • Image Replacement (typography as a graphic is seen by everyone - except search engines - and one has to play CSS games, to attempt to achieve both objectives).
  • sIFR (sIFR means "Scalable Inman Flash Replacement", based on work done by Shaun Inman, et. al. A convoluted solution that relies on JavaScript and Flash technologies to replace web-safe text with a Flash image of the text, in your chosen typeface.)
  • Cufón - a JavaScript image replacement technique that's a worthy alternative to sIFR. The name is derived from "CUstom FONts".
  • FLIR - A server-side PHP script that dynamically generates images of text in the font-face of your choosing. PHP5 is recommended and requires GD library (with FreeType and PNG support enabled).

 

CSS3 @Font-Face Embedding to the Rescue

Even though the ink is still drying on the official June 30th release of FireFox 3.5, which supports the @font-face CSS3 selector, there has been much buzz about how this will herald a new, creative web-font landscape. Truth is that Safari has supported @font-face for a while now and Opera 10+ is reportedly going to be supporting supports it as well.

In the Inspect Element Web Design & Development Blog, Tom Kenny writes, "Currently only Firefox 3.5 and Webkit browsers such as Safari and Google Chrome will render [the @font-face selector]. Of course, older browsers such as IE6 and IE7 will not support it and with IE8's distinct lack of CSS3 feature [sic], that doesn't support it either." (Source: "Go Beyond Web Safe Fonts with CSS3")

I know it's popular to bash Internet Explorer, but Tom (and others) need to check their facts before they publish false information!

Firstly, Microsoft has been supporting font-embedding for over a decade (since IE4 in 1997) and also the font-face tag and @font-face CSS selector. Secondly, the @font-face selector was a 1998 CSS2 recommendation (dropped in CSS2.1). It's made a comeback in CSS3 and hopefully will become a web standard.

Updated:4-Feb-2010 (Chrome 4 now supports @font-face by default) Secondly, Chrome doesn't support @font-face by default. (Apparently, Google supported it in an early beta release and then disabled it for subsequent releases, for "security reasons". To activate it, users must add a command-line switch --enable-remote-fonts .) (source)

The beauty, of course, is that it's now possible to embed fonts for IE6, IE7, IE8, FireFox 3.5+ (PC & Mac), Safari (PC & Mac) and (soon) Opera 10. According to our June 2009 web stats, that's over 97.5 percent of our visitors - about as "cross-browser" as you're going to get in today's online world! (Dunno about macIE or other browsers ... I'll have to rely on reader feedback.)

 

How @font-face Works: Easy Peasy

The great news about CSS3 support of the @font-face selector, is that - unlike work-a-round techniques - it's easy to use. Yay! Fonts without hoops!

Just upload the font file you want to use to your server - making sure that you're not violating any copyright rules - then embed it, using the following CSS:

Code:

 
@font-face {  
  font-family: yourFontName ;  
  src: url( /location/of/font/FontFileName.ttf ) format("truetype");  
}  
 
/* Then use it like you would any other font */  
.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;  
}  
 
 

 

The CSS code above defines a font called "yourFontName". You may use the actual font name - or - for testing purposes a unique, made-up name. Whichever you use, all you need to do is reference it again in the CSS, wherever you want to use it.

That's it! Note: the CSS3 specification provides for several font formats: "truetype" (ttf), "opentype" (ttf,otf), "truetype-aat (ttf), "embedded-opentype" (eot) and "scalable-vector-graphic" (svg,svgz).

 

C'mon, is it Really that Simple?

LOL ... of course not!

If there's one thing we've all learned about the Internet, nothing is really that simple and embedding fonts using the "new" CSS3 @font-face selector isn't any different.

"So, what's the issue?" you might ask.

Though Microsoft has been supporting font embedding since IE4 (1997), it's current support for @font-face is done a tad differently. Different enough, that it'll ignore a pure, valid CSS3 version. Internet Explorer supports only their proprietary "Embedded OpenType" font (eot) file format and it will incorrectly parses CSS that includes "format" values.

To achieve cross-browser compatibility, one must create some redundant CSS. The overhead isn't much and the gains, of course, are great. Using Microsoft's free WEFT tool (or this easy Online TTF->EOT Converter), one can create a Microsoft proprietary OpenType font file (having an EOT extension). Upload both the EOT and TTF files to your server. Using a single @font-face selector, load the Embedded OpenType font (EOT) for IE6, IE7 and IE8 first then the TrueType Font (TTF) for FireFox 3.5+, Safari (Win & Mac versions) & Opera v10+. BOOM ... you've just served the vast majority of your website visitors. In addition, the process degrades nicely. Browsers that can't load your special fonts won't miss a thing, as they'll be using the secondary, tertiary or generic fonts you specify. Additionally, the process is relatively future-proof. If Internet Explorer ever does support the CSS3 @font-face rules, then it'll simply utilize that bit of code already there. If not, you're covered there too.

An example of some final, CSS3-valid code might look like this, for a cross-browser compliant embedded font:

Code:

 
@font-face {  
  font-family: " your FontName ";  
  src: url( /location/of/font/FontFileName.eot ); /* IE */  
  src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */  
}  
 
/* THEN use like you would any other font */  
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif;  
}  
 

 

Though you can name use any font name, use the real one (capitalization matters) for the "local" declaration. This will give non-IE browsers an opportunity to look for the font on your visitor's computer. If it's loaded, it'll saves a TTF download. (Note: The local declaration is required, because it confuses Internet Explorer, which will fall back to the EOT file without trying to download the TTF).

Hints, Tips & Observations

I'm no font expert, just a web developer that's eager to utilize more than a limited number of fonts. When I realized that it would be possible to utilize embedded fonts for over 95% of our visitors, I spent a fair bit of time, playing around. Some of what I discovered along the way, contradicted what I've read elsewhere. Below is a brief list of this empirical knowledge, which I hope will help more people to use and understand this technique of font embedding.

font-squirrel
  1. Get Out of Font Hell Fast by Letting the Squirrel Crack Your @font-face Nut - I wrote this article days after cross-browser font embedding became technically feasible (July 4, 2009). The work-flows to embed fancy fonts have evolved to become much easier & faster. Here is an updated @font-face work-flow, which uses two very handy tools:
    1. Find a font you want to use. (I generally use True-Type Fonts, but I'll bet other formats will work).
    2. Verify that you can use the font on your website. (i.e., don't violate the copyright ... just as you wouldn't with images).
    3. Upload the font file to Ethan's @font-face kit generator. (I generally choose the "expert" mode, generating only the EOT and TTF formats. I might subset a font more - or less - depending on how I plan on using it & the TTF file size. I strive for file sizes of less than 70KB.)
    4. Save your kit, which includes all you need to deploy your fancy font: the HTML, CSS & font files. (I usually tweak the font & file names to my liking).
    5. To save even more bandwidth, run the EOT file through Richard Fink's command-line utility program EOT Fast (EOT Fast compresses EOT files, making them up to 70% smaller)
  2. Put IE First - In the CSS, it's important to put the IE EOT "src" first. It's also important that "src" is the only declaration. If you add "local" or "format", IE won't understand it and it will fail.
  3. CSS3 doesn't do EOT - Despite reading that the "embedded-opentype" (EOT) is one of the formats allowed in the CSS3 @font-face selector, it either doesn't work, won't read the MicroSoft proprietary EOT flavor, or something else as I couldn't get FireFox to utilize the same EOT font file as Internet Explorer. (Pity, as it means loading the TrueType version, as well as the proprietary EOT version).
  4. Testing can be tricky - In the @font-face CSS, if you use the actual font name for either the "font-family" declaration or the "local" declaration and that font is loaded on your computer, non-IE browsers IE Browsers IE browsers will never grab a local font. Once a "src" is specified, it'll download the EOT, every time. It doesn't matter if you specify the real name in the @font-face selector, or any other selector, for that matter. Click for the source of this information (based on IE4 behavior). It's the last question on the MSDN Frequently Asked Questions (at the bottom of the page).  will grab your locally-loaded font (i.e., doesn't test the font download). To make sure that the browser is downloading the font from your server correctly, you'll need to either (a) unload the font from your local computer or (b) rename the font in the CSS to something you know doesn't match any of your loaded fonts.
  5.  src: local("font name"),
          local('fontName'),
          local("otherFontName"),
          local('some other font name'),
          url(../font/font.ttf) format('truetype');
    Load Local - Once you determine your font download is working, rename the font in your CSS to its true name. Your visitor might have that font installed. You can use multiple local() declarations. If you know the font might have several names, use this to your advantage, like the example here (note syntax options). Non-IE browsers will look for the font in each location, stopping when it finds one or at the TTF download. (IE doesn't look locally in @font-face, so don't even try adding local() for the EOT line).
  6. Trouble-Shooting Tips - Having problems deploying @font-face can be frustrating and discouraging. To test embedded fonts, it is important to make certain the font is NOT installed locally and to test the page in a variety of browsers. Since this article was published, I've helped a lot of people with their fancy @font-face fonts and below is quick list of typical problems (i.e., before you email me asking for help, be certain to check this list!):
    1. Syntax - Sounds simple, but make certain your syntax is 100% correct. Quotes around the local() filename, dash between @font and face. Nothing will work if the syntax isn't right. Validating your CSS (be sure to select the "CSS Level 3" profile) is the best way to check the syntax.
    2. Font Location - This trips up a lot of people. An absolute path of "/font/yourFont.eot" generally isn't the same as the relative path "font/yourFont.eot". Relative paths are relative to what? The base URL? The CSS file? The HTML folder? Relative paths can be confusing! Keep things simple and use an absolute path. (I generally create a "fonts" folder right off the web-root and put all my fonts there. Then I use the absolute location "/fonts/font.eot" for all of my fonts. It's short, sweet, will always work and -bonus- it's domain-independent). To test if your location is correct, plug the URL "where the computer thinks your font is", into the browser address bar and the result should be a download of the font. If you get a 404 "File not found" - location is likely the problem.
    3. Corrupt File - I've seen corrupt files, either totally munged font files which are unusable or, more recently, fonts that work locally, but contain minor errors (typically fails in FireFox). (This is hard to test, but I've found that running fonts through Ethan's FontSquirrel generator will clean them.) ;)
    4. Windoz Server? - Recently, David discovered that "in IIS v6 and later, you must add a MIME-type of application/octet-stream for both .OTF and .SVG in order for those types to be served properly on windows-based servers". (Thanks for sharing this, David!)
  7. WEFT - At the time the article was published, Microsoft's free WEFT Tool was one of the few ways of generating an EOT font file. Since then, new and better tools have been developed (see #1). Unless - for some reason - you're still using WEFT, you can ignore the items below. I leave them here just in case someone is still bent on using WEFT.
    1. Using WEFT Dont' use the WEFT wizard. WEFT wants to create a "font object" and subset it for any and all fonts it finds in webpages you specify. All you really need is the conversion part of WEFT. Here's an easy WEFT workflow:
      1. Load your TrueType font (i.e., drag it into the Windows font folder);
      2. Start WEFT (it'll create a database of "loaded fonts" on opening, so you'll need to rebuild the database if you load your font while WEFT is running);
      3. Pick the font(s) you want to convert (Tools > Fonts to Embed > Add... > Select a font on the list > repeat if you want to convert more);
      4. Close the window and then do the conversion (Tools > Create Font Objects > Set location of the font object and "allowed roots" > Finish);
      5. Upload your newly-created EOT font file to your server (I generally rename mine and make all the characters lowercase).
    2. Use TrueType Fonts - Even though the CSS3 @font-face selector provides for several font formats, WEFT will only convert TrueType fonts (Supposedly, WEFT will convert OpenType fonts as well, but the few that I tried didn't work, as they didn't show up in the selection list of "embeddable fonts").
    3. Some TrueType fonts won't convert - Some fonts are designated as "non-convertible" by the designer, or there are other problems. WEFT shows a list of available fonts.
    4. Converting OTF to EOT is More Work - Presently, it's a two-bank shot. First, convert the OTF file to TTF using FontForge or this free online font converter . Then you can use WEFT, FontForge, ttf2eot or TTF->EOT to convert the resulting TTF to an EOT.
    5. Understanding "Allowed Roots" - There are a few tricks to understanding WEFT. A big one: the EOT font file you create will only work for URL's you designate (i.e., "allowed roots"). If you own your own domain and want to be able to use the font file on any page, you'll need to specify both the "www" and "non-www" roots. (e.g., http://www.randsco.com and http://randsco.com).

 

Conclusions

Because FireFox 3.5+ supports the CSS3 @font-face selector, cross-browser font embedding is now both possible and practical. The effect this will have on the web should be dramatic, replacing a decade-old typographic wasteland with a tastier and richer diversity of fonts.

While cross-browser deployment isn't ideal, the benefits of utilizing CSS to embed fonts is obvious: It's lightweight; it's valid CSS (CSS3); it's easy to do; it's search engine friendly; it's cross-browser compatible; and (yay) it relies neither on either JavaScript or Flash. The only downside is the slight overhead in downloading font file(s) and - depending on browser settings Defeating Font Embedding Internet Explorer In Internet Explorer 8, users may elect to disable font downloading or they may ask to be prompted, resulting in a message similar to the one below. (I believe, by default, this is set to "enable", so visitors would have to explicitly re-set the value and the majority won't). ie font embedding message To reset in IE8: Tools > Internet Options > Security Tab > Custom Level > Downloads Section > Font Download (last one in the section). FireFox In FireFox, users can elect to replace all web fonts with fonts of their choosing. (This is defeated, by default and again, it would be up to users to explicitly re-set this value and the majority won't). To reset in FFx: Tools > Options > Content Tab > Fonts & Colors (Advanced Tab) > un-tick "Allow pages to choose their own fonts, instead of my selections above").   - may not render even for those browsers that support it. No worries! The technique degrades nicely to the normal "web-safe" or generic fonts you specify.

Now Go have some fun!

UPDATE 25-Aug-2009: I've recently found two online TTF->EOT converters:

Hint: Both conversion tools are based on an Open-Source utility called "ttf2eot". The utility is written for a UNIX O/S, but the download ships with a windows-based, command-line binary. (See the ttf2eot demo page for more information).

UPDATE 30-Aug-2009: Found an easy online converter that converts OTF to TTF (it also converts .dfont files to .ttf). Works a treat!

UPDATE 1-Sep-2009 Opera 10 released It supports @font-face, but is picky about the syntax in the "local" declaration. Needs local('font') or local("font"), but won't interpret local(font).

UPDATE 4-Sep-2009: Based on work by Paul Irish and Andrea Giammarchi, the cross-browser @font-face CSS has been improved. (Learn How)

UPDATE 8-Sep-2009: Had a devil of a time getting the Chrome command-line switch to work, until I discovered that it's --enable-remote-font (not --enable-remote-fonts - plural). (EDIT: The problem was likely some internal developer confusion over the spelling, but issue appears to be limited to version 2.0.172.43 (and earlier?). I'm now on v3.0.195.21 (winXP sp3) and it's definitely plural.)

UPDATE 19-Oct-2009: Looks like the next release of Chrome will have font-embedding turned "on", by default.

UPDATE 5-Dec-2009: Chrome support for @font-face, by default, has been pushed back to the Milestone 5 release (waiting on a response from Apple).

UPDATE 21-Jan-2010: Added a troubleshooting section (List Item #10 #6 above). Note: Need to revamp the overall list and de-emphasize WEFT, because Ethan's Font Squirrel @font-face Generator is an easier, more comprehensive & online solution for conversion, cleaning and reducing file size.

UPDATE 4-Feb-2010: Chrome 4.x now supports @font-face by default (Earlier entries about issues w/Chrome and @font-face support have been grayed out)

UPDATE 26-Nov-2010: iOS 4.2+ now supports @font-face (in TrueType format). This means that mobile Safari, running on an iPad or iPhone, will see your TrueType fancy fonts! Test your mobile device.

UPDATE 27-Dec-2010: Added @font-face recommended workflow, which showcases two long-overdue additions: Ethan's Font Squirrel Generator and Richard's EOT Fast. (Added Community Chest card "Get Out of Font Hell", revamped "Tips" section & shoved most of the kludgy WEFT stuff into the afterthought basement).

UPDATE 2-Mar-2011: Firefox 4b12 now fixes FOUT using a timer. The bug was first reported on 19-Jun-2009. Glad to see it fixed and look forward to FireFox4 public release. (Lots of smart people spent a tad of time on FOUT work-a-rounds).

 

(Permalink)
Views: 718669 views
236 Comments · GuestBook
default pin-it button
Updated: 12-Jul-2011
Web View Count: 718669 viewsLast Web Update: 12-Jul-2011

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.


Subscribe to Comments

Auto convert line breaks to <br />

1.flag John Comment
07/13/09
Good write up Scott. Thanks for getting all the detail into one post :)
There is still a slight "flash of unstyled fonts" on first visit however it's minor.
2.flag stk Comment
07/13/09
John - Yes, I noticed that. It's also visible on "The Potential of Web Typography" page, which was put together to demonstrate the CSS font-embedding capabilities of FireFox 3.5

The problem seems to be limited to FireFox, as all the IE's and Safari render fancy fonts without that "flash".
07/25/09
I can confirm that @font-face works on a Mac in FF 3.5, but not in 3.0 (But that's expected).
4.flag stk Comment
07/25/09
Michael - Thanks for the confirmation, I've ammended the copy to reflect your information. ;)
5.flag Damian Comment
07/29/09
Very nice. works on IE 7, FF 3.5 but not Google chrome.
6.flag Hummer Comment
08/11/09
Thanks dude. This helps me to solve problem.
7.flag stk Comment
08/13/09
Hummer dude - So glad. :D
8.flag Shaunak De Comment
08/18/09
Great write up. Too bad neither this nor the shadow property work on Chrome.

A good font really makes a page. Doesn't it?
9.flag stk Comment
08/22/09
Shaunak - Thanks! :D Yeah, not sure what's up with Chrome (especially since web-kit based browsers are supposed to "see" this selector).

Fonts can enhance a page, but - like any design element - they can be abused, make a page look horrid, as well. ;)
10.flag Peter Comment
09/03/09
I'm having trouble with embedding in firefox. Should this work?

@font-face {
  font-family: Kunstler Script;
  font-style: normal;
  font-weight: normal;
  src: url(styleKUNSTLE0.eot);
  src: url(stylekunstler.ttf) format("truetype");
}

Its fine in IE, but just can't get it to display in FF 3.5.2.
11.flag stk Comment
09/03/09
Peter - In a word, no.

First, I see no benefit in setting font-style and font-weight to "normal", as both are defaulted to "normal" anyway. For the sake of brevity, omit them.

Second, your results are odd, because testing shows that FFx would be the browser that understands this code, not IE. (IE doesn't understand "format()" and skips over tries to download a very strange font file, which results in a 404 "File Not Found" from the CSS contained in this @font-face selector).

Bottom Line: You'll need to use two @font-face selectors Use one @font-face selector, as described in the examples above.

Hope this helps.

12.flag Paul Irish Comment
09/04/09
Scott-- This summary is totally kickass. You've given it a lot of thought and attention and it's a great resource.

I've actually just written up a summary of all the @font-face implementation syntax techniques, along with the best one I think there is... which hasn't been covered yet!

Bulletproof @Font-Face implementation syntax

I'd invite you and everyone to give it a peek.
13.flag stk Comment
09/04/09
Paul - You've sparked my interest! Thanks for the comment. (Oh sure, yeah thanks, now my morning will be totally shot, whilst I run some tests!) Fun!

*runs off to look at server logs*
14.flag Foppe Hemminga Comment
09/04/09
In the past I've used the Font Replacement from the article in A List Apart http://www.alistapart.com/articles/dynatext/
This technique replaces text by cached images that are created server side. One of the advantages is that the XHTML source contains the 'normal' text so it's read by bots.

However the latest HTML5 techniques (not only the fonts) are awesome. It won't be long before I completely ignore backward compatibility. I've waited too long for this.
Maybe degrade gracefully like we did with jS: "You have a shitty browser, contact the vendor." ;)
15.flag stk Comment
09/04/09
@Paul - I've run some tests and have modified the text in this article to reflect the superior CSS code. Thanks ... you're an ace!

@Foppe - In the past, I've done zero font replacement because all the techniques were just too much work. I'm thrilled that now over 97% of our visitors get fancy fonts with @font-face!
16.flag Peter Comment
09/05/09
Hi STK. I'm only an amateur geek (one day i hope to upgrade!) so could you have a look at the website link attached and see if you can tell me whats wrong? It's still not working in my firefox.

Thanks.
17.flag Richard Fink Comment
09/06/09
Chrome (2.0.172.43+) supports @font-face (just noticed today).

This is incorrect. There was one version of Chrome - which is the one you might have tested on - that has @font-face linking enabled. In the very next release they turned it off.

My understanding from Ralph Herrmann's webfonts blog is that it can be enabled by launching Chrome with a particular command-line switch.
Nice write up.

Cheers,
Richard Fink
18.flag stk Comment
09/06/09
Richard - LOL ... no-one likes to be told they're wrong, me included! :p Did I jumped to conclusions?

LOL ... turns out - I did. I spent so much time the other day, testing and retesting Paul's "bulletproof" CSS, that I left that fancy font loaded on my computer. (Bit by #8 in my own "hints" section!!). Oops. My bad! :oops:

Hopefully, Chrome will support @font-face 'out of the box' at some point in the future. *goes to fix the text copy* (In addition to embarrassing myself of Ralf's blog, I've included his information on Chrome support).

Thanks, Richard, for pointing this out, making me look twice and for the informational link!
19.flag Richard Fink Comment
09/07/09
@stk - Writing as somebody who's played around with font-linking a lot, the same thing has happened to me many times.

Once font-linking really gets rolling - and if FF supports the new iteration of EOT it will happen really fast - investing in a font-management program that can dynamically load/unload or install/uninstall fonts quickly and easily becomes a must-have in any web designers toolkit.
Don't feel bad. I reported that Chrome had font-linking, too.

I wasn't wrong, and neither were you, technically.

It did support it, but then, in the next upgrade, they turned it off!

Cheers, rich
20.flag Leon Comment
09/07/09
Great work. however i just cant get it to work.
My code looks like this

<style type="text/css">
@font-face {
  font-family: kingthings;
  src: url(/kingthings.eot);
  src: local(kingthings), url(/kingthings.ttf) format("truetype");
}
.kingthings {
  font:kingthings;
}
</style>
<p class="kingthings">test123</p>



The ttf and eot files are placed in the root. I've tested on IE8
st here

To be able to post the code here, I have replaced the < and > than sign with &lt; and &gt;
21.flag stk Comment
09/07/09
Leon - No worries. I've formatted your code so it looks better. ;)

Two quick comments:

1) I hit the www.gaz.gk link and didn't see a test page. I also tried hitting www.gaz.dk/kingthings.ttf and got a 404. (i.e., a link to your test page would help and are you sure the font is where you think it is?)

2) AFAIK, the font directive in the "kingthings" class won't work. If you use "font" shorthand, you need to include (at least) the font size and family, in that order. Try:

 a) {font: 100% kingthings,sans-serif; }

or (non-shorthand)

 b) { font-family:kingthings, sans-serif; }
22.flag stk Comment
09/08/09
FYI

Discovered that the Chrome command-line switch to enable @font-face is --enable-remote-font (singular) ... as opposed to --enable-remote-fonts (plural).

It's being reported around the web incorrectly, no doubt because developers are mixing it up.

Tested. Article updated.
23.flag stk Comment
09/09/09
@Peter - Sorry, your 2nd comment fell thru the cracks (it came in Friday night & Saturday was when our host server failed for 5 hours ... first time we've had down-time in over 2 years).

The fancy fonts in your "Empress Design & Print" site looks fine in my FireFox3.5 (and IE8)?

(Assume you got it sorted & sorry for the response delay)
24.flag peter Comment
09/09/09
stk - Thats ok, everyone needs downtime! The font still doesn't come out right in my firefox 3.5.2 on two different pc's. I downloaded specially for this site and haven't changed any settings.....not sure how to get it working, especially now you say it works fine for you!!

But I guess the code is ok then so I'm just doing something else wrong! :(
26.flag Lariza Comment
09/12/09
Thanks for great article! Though I'm pulling my hair out because I have spent hours with this and I can't get the eot versions of my fonts to work. I have tried both Quicksand (which is said to be "@font-face compatible" at fontsquirrel.com) and Little Days. I followed your instructions "Using WEFT" and it actually said that there was something wrong with Quicksand so I wasn't that surprised - I guess it's not that compatible after all? :/ Little Days on the other hand seemed to be ok, but I cannot see it in Explorer. My code is as follows:

@font-face {
font-family: "Little Days";
src: url(../fonts/Little-days.eot ); /* IE */
src: url(../fonts/Little-days.ttf) format('truetype');
}

h1 {
font-size: 40px;
font-family: "Little Days","Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
line-height: 30px;
}

Is there something wrong with the code? Any suggestions?
27.flag Richard Fink Comment
09/12/09
@stk

>Discovered that the Chrome command-line switch to enable @font-face is --enable-remote-font (singular) ... as opposed to --enable-remote-fonts (plural).

--enable-remote-fonts is working for me. ??

Also, with regards to using local('fontname') as a way of preventing IE from attempting to download the TTF font file, Opera does not seem to support local() in my testing.
Can anyone confirm?
28.flag stk Comment
09/12/09
@Everyone -

1) Keep in mind that testing your @font-face cross-browser can be difficult (see #8 in Hints above). Browser version, cleared cache, code syntax, locally loaded fonts, file type, conversion success and file location all affect results.

2) I don't mind helping you sort your @font-face issues, but posting a link to your test page helps me far more than pasting code (saves you work too!)

29.flag stk Comment
09/12/09
@Lariza -

What you say about "Quicksand" confirms my findings that not all TTF fonts can be successfully converted to EOT using WEFT. Did you try one of the online converters? (This one or This one)

RE: Your code is missing the necessary local() bit, which is what makes IE lose it's head and focus on the EOT line, instead of the TTF line.

[i.e., src: local("Little Days"), url(../fonts/Little-days.ttf) format("truetype");]
30.flag Lariza Comment
09/12/09
Hi stk,
and thanks a lot for your help! :) local() did the trick, of course. I had it there originally but I took it off at some phase when I was trying practically everything with Quicksand. :roll: About Quicksand: I tried ttf2eot but it didn't work for me. And Quicksand is OpenType font so I had to convert it to ttf first.

So, Little Days works now - almost! My next "challenge" concerns scandinavian characters (ä, ö) which eot didn't preserve for some reason. :(
31.flag Satoshi Comment
09/13/09
Thanks ! I really love your method !! I will try it now.
32.flag stk Comment
09/13/09
@Richard - What version of Chrome are you using and on what platform? (I'm running the current production version on windows 2.0.172.43)

It's --enable-remote-font for me, as plural doesn't work (and why I was frustrated, when I first tried to use it).

I'm still digging into this. I've been rooting around in the Chromium/Webkit code and realize there's a way to enable remote fonts via the preferences file (just not sure the syntax). While I've seen the command-line switch as --enable-remote-fonts (plural) in the code, I can't explain why it doesn't work for me (it's singular in a couple of the bug / review responses).

What version of Opera are you using (and platform)? Do you have a link to the test page that's not working for you with local()? (I'll come round and have a peek with my version - 10.00/b1750/Win32/XP).
33.flag Richard Fink Comment
09/14/09
@stk

I was wrong about Opera and local(). That's not why Paul Irish's syntax isn't working.
Will explain, along with presenting an alternate syntax, shortly.
As far as Chrome - using ver 3.0.195.20 on win xp SP3.
It's definitely "fonts" plural, for this version but I admit, I haven't tried the singular. Maybe both work!
Regards, Rich
34.flag stk Comment
09/14/09
@richard - Hmmm. Are you running a beta version of Chrome? (2.0.172.43 -vs- 3.0.195.20) What *I think* happened is a typo. Most of the doc/discussion is plural, but the code (for this version, at least) is singular. They prolly fixed it, by your version.

Eager to see your Opera stuff + alt syntax.
35.flag Richard Fink Comment
09/15/09
@stk
Alternate CSS syntax with notes is now online.
Syntax that makes Opera happy, keeps the backward compatible @font-face declarations separate from the forward compatible ones without relying on IE Conditional Comments, avoids any additional HTTP request(s) by IE, and leaves local() as an option, not a requirement.
Mo' Bulletproofer @Font-Face CSS Syntax
36.flag Brian Jambor Comment
09/15/09
I've tried everything I can think of, but I still can't get it to render properly in Firefox 3.5. Any help would be appreciated: http://www.customagentwebsites.com/agentsuccess/

CSS: http://customagentwebsites.com/agentsuccess/wp-content/themes/FlexxCanvas-Arial/style.css

@font-face {
font-family: 'PortagoITC_TT';
src: url(http://www.customagentwebsites.com/agentsuccess/wp-content/themes/FlexxCanvas-Arial/images/PortagoITC_TT.eot);
src: local('PortagoITC_TT'), local('PortagoITC_TT'),
url(http://www.customagentwebsites.com/agentsuccess/wp-content/themes/FlexxCanvas-Arial/images/PortagoITC_TT.ttf) format('truetype');
}


[Ignore the lack of styling and margin issues as this is a work in progress]
37.flag Brian Jambor Comment
09/15/09
Figured it out. Have to use relative links in FF 3.5 - http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox
38.flag stk Comment
09/15/09
@Richard You've never answered my question: "Which version of Opera are you using?" (Mine - 10.00, b1750, Win32, XP sp3 - works fine.)

@Brian - LOL ... just replying with your solution, as you wrote. To avoid similar problems, I created a /fonts folder off of the webroot, which has the side benefit of shortening the CSS [i.e., src: url(/fonts/font.ttf);]

Glad you got it sorted.
39.flag George Comment
10/05/09
I am having a problem to display ML-TTKarthika font on my website. can anyone help me for this. even if user don't have the font on their machine, I don't want user to download fonts for reading the web site.

So please help me to fix this problem i am using ML-TTKarthika.ttf font (Indian language) is using this website
40.flag stk Comment
10/06/09
George - (1) There are 46 XHTML errors on this page. I'd suggest cleaning those up first, as they may (or may not) be the cause of your problem (W3C Validator Link) (2) I saw the embedded @font-face CSS, but couldn't find either the EOT or TTF files, at the URLs & filenames specified. (I would assume this is the main issue). See comments 36, 37 & 38 for more information.
41.flag George Comment
10/06/09
STK - I cleaned the XHTML errors. I also linked the font file [ src: url(fonts/MLTTKAR0.eot) ]. It's still not working.
42.flag stk Comment
10/06/09
George - (1) There remain 37 XHTML errors; (2) while I can now find the EOT file, the TTF file is still *missing*; (3) The @font-face CSS has has two problems that I see: (a) it's missing the local() designation, which keeps IE from working and (b) it's missing the TTF file extension & location, which keeps all the other browsers from working.

Current CSS
@font face{
font-family: ML-TTKarthika;
src: url(fonts/MLTTKAR0.eot);
src: url(../Fonts/ML-TTKarthika);
}


Recommended CSS
@font-face{
font-family: "ML-TTKarthika";
src: url(/fonts/MLTTKAR0.eot);
src: local("ML-TTKarthika"), url(/fonts/ML-TTKarthika.ttf) format("truetype");
}


1) It's a good habit to put quotes around your font-family & local() ... covers the case where a font name has a space in it and Opera requires it for local().
2) Putting a slash (/) in front of the fonts directory tells the server that fonts is off webroot and changes it from a relative to an absolute path (it's also domain-independent, so if you move to a different domain, your links won't break).
3) Local() is required for this syntax to work (it confuses IE, which will then fall back and pick up the EOT file, while other browsers will pick up the TTF. Besides ... some users might actually have the font loaded, which will save server load if they do.
4) You'll need to include the ttf file extension and I'd put the file in the same /fonts directory as the eot file (keeps things simple).
5) *EDIT* forgot to tell the browser to expect "truetype" - added. ;)
6) *EDIT* forgot the dash in @font-face too! (Sometimes it's the simple things!) :p

Hope this helps.
43.flag Richard Fink Comment
10/06/09
If I can add my advice at this point, also:
Make a simple sample page with the font in the same directory as the sample page and test to make sure the correct font is showing up without the complications of a lot of CSS on a complex page.
How was the EOT created?
There's always the possibility it's corrupted or has root strings enabled and IE is simply refusing to display it.
A simple sample page will reveal that.
Always a good idea to take variables out of the mix and test for basic functionality first.
Cheers, Rich
44.flag stk Comment
10/06/09
Good call, Richard. I'll echo that.

While I tend to "cowboy" things, a simple test page is a good place to fall back, before you start banging your head against a much more complicated wall. ;)
45.flag George Comment
10/06/09
Dear STK

Thank you, Thank you, Thank you, Thank you, Thank you,
Thank you so much. Finally it is working in IE and fire fox. Not in working in Google chrome. I was looking to resolve this issue almost 1 month; finally you fix it for me (STK). I don’t know how to express my sincere thanks to you. Again thank you so much for helping me. One more question this code work for Google chrome?
46.flag Richard Fink Comment
10/06/09
stk: The EOT Miracle Man!
47.flag stk Comment
10/07/09
George - You're welcome. Donations are always appreciated, as are link-backs. ;)

Yes, the code works in Google Chrome. Unfortunately, Google has disabled remote font embedding, because of "security problems". To enable it, one must start Chrome with an "--enable-remote-fonts" flag.

Chrome developers are hoping to get the security issue resolved and enable font embedding (soon).

Richard - Funny!
48.flag George Comment
10/07/09
STK - I will
49.flag Skandragon Comment
10/13/09
I tried for about an hour to get IE to load a converted font without luck. FF and Safari (both on my Mac and this PC thing) work, but IE refuses to play nice. As usual.

The site I'm hacking on is http://art.waywardgypsy.com/ which is a work in progress.

Any hints?
50.flag Richard Fink Comment
10/13/09
@skandragon
If you are following the tips for cross browser @font-face syntax as has been discussed here (follow links, too!), the culprit is probably a bad EOT file.
In any event, that should be what you test for first with a bare-bones page, just for IE.
Do the fonts show up then?

Cheers, Rich
51.flag Martin Stabenfeldt Comment
10/23/09
I'm cross-testing http://titti.bull.owre.no with browserlab.adobe.com.

Either I've done something wrong, or browserlab.adobe.com doesn´t fetch the @font-face fonts for IE.

Would anyone be so kind and confirm, or even better give me a hint om what's wrong?

@font-face
  font-family: "Zapfino";
  src: url( /fonts/Zapfino.eot ); /* IE */
  src: local("Zapfino"), url( /fonts/Zapfino.ttf ) format("truetype"); /* non-IE */
}


52.flag Richard Fink Comment
10/23/09
@martin stabenfeldt
zapfino is a script font, no?
I'm not seeing it in any browser.
Are you?
First thing I would do is move the @font-face declaration up to the top of the style sheet. And then move the part of it that's for EOT, into its own @font-face declaration right above it. In other words, two @font-face declarations, the first one specifically for IE.
See what happens.
rich
53.flag stk Comment
10/23/09
Martin - First the good news. Your CSS @font-face declaration appears fine. The TTF and EOT fonts are found, where the CSS says they are, as I was able to download both.

The bad news is that the TTF file is corrupt (assume the EOT too). It downloaded on my XP machine as a 517KB file, which seemed a tad large and wouldn't open - "not a valid font file".

More good news. I was able to snag a free copy of the (comes-with-a-Mac) Zapfino font following the links on this page. It's only 77KB and you can download it here.

I'll leave it to you to make the EOT, though I do recommend you follow Richard's suggestion and put any/all @font-face selectors first in your CSS.

Hope this helps.
54.flag Richard Fink Comment
10/23/09
@stk
Once again, the magic man. From here on in, when I run into trouble with @font-face, I'm asking you!
I think a diagnostic "best practice" is beginning to emerge here.
#1 Check that the fonts show up in a simple demo page, free of anything that might mask a basic problem with the font itself.
55.flag Martin Stabenfeldt Comment
10/26/09
@stk, thanks for the tips! I´ve moved the @font-face to the top, re-exported the font, but still no luck.

The TTF is from my Mac, and the EOT was created from console using ttf2eot.

517K Zapfino.eot
516K Zapfino.ttf

FireFox (3.5.3 Mac) recognize correct filetype for both.

I noticed that it´s not only IE that don´t use the provided fonts. Non of the browsers on Windows displays it. Mac works as it´s embedded there.

I tried the fonts you found online too, without luck I´m afraid.


(http://titti.bull.owren.no)
56.flag Martin Stabenfeldt Comment
10/26/09
I did a test with the browser cross-checker to Adobe: browserlab.adobe.com.

Tested http://www.alistapart.com/d/cssatten/poen.html, and it seams like non of the Windows browser it provides supports @font-face.
57.flag Richard Fink Comment
10/26/09
@Martin Stabenfeldt:
Try browsershots.org.
Web fonts show up on their screen shots. Works fine.

rich
58.flag stk Comment
10/26/09
Martin - First, I have to say that despite the nifty graphics, http://browserlab.adobe.com sucks! (Only one of the 9 browser versions they offer actually renders @font-face properly - Safari OSX. Not much help to you, since you probably already have that.) All supported FireFox versions are less than 3.5 (which is when FireFox begins @font-face support). I tried IE6/7/8 against this Randsco article and they all failed to correctly render @font-face. (I'd use the service Richard suggested, though I haven't tested it myself).

Secondly, I don't have a Mac (Help change that! Download my FireFox design entry, vote for it and leave a comment at the WebMynd design contest! 0:-) ) All I can say is that when I download the Zapfino font [517KB] it won't open in my XP folder and I get a message "not a valid font file".

Have a look at http://randsco.com/test/titti-bull-owre.no/ ">this test page, where I've used your CSS and point to the EOT and TTF file I suggested you download earlier. It *should* look fine in your Mac (Safari or FireFox3.5+). It also looks fine in IE6,7,8; winSafari; FireFox3.5 and Opera10 on a PC. (Try that service Richard mentioned).

I did have to fiddle with the font sizing, as your font stack sizes were a tad small for the Zapfino font (which is one of my gripes about CSS: You can't easily assign font sizes for each font in a font stack - independently).

EDIT: Though the fonts show fine, you've got some CSS breaks in the menu area between IE8, IE7 and IE6 ... plus the Tittinn graphic appears to be a PNG with transparency, which doesn't render in IE6 (change to a GIF and you'll be fine).
59.flag stk Comment
10/26/09
Richard - I gave browsershots a try.

I was initially impressed at the selection of platforms and options, but (a) why are so many selected by default?; (b) why are there only 'ads' under Mac OS? (no browsers to select) and (c) a lag time of 19 minutes for my 2 shots is too long between iterations and I couldn't use this for site development. Bummer.
60.flag Richard Fink Comment
10/26/09
Re- browsershots.org
Far from perfect but better than nothing. Now you'll know to initiate the preview right before lunch.
I uncheck nearly all the browsers except the important ones. Much faster and manageable.
61.flag Martin Stabenfeldt Comment
10/28/09
Stk and Richard Fink, thanks a lot for all help and tips!

Stk, I switched to the font you found and it now works in IE8. :)

I installed Windows 7 through Parallels and tested Opera 10.
Nope, no Zapfino fonts seen there.


BTW: http://www.webmynd.com/look/designs/by_id/68 gives a 500 internal error page.
62.flag Richard Fink Comment
11/18/09
@stk and all:

Found out about another couple of browsershots.org type sites.
Tried one and it works great so far. Speedy too.
http://ipinfo.info/netrenderer/
for testing your site in earlier version of IE.
Rendered really fast. Picked up the webfonts, everything.
http://litmusapp.com/browser-testing
This one I haven't tested yet but if it works anything like the first, far better than b-shots.
There's a link to this from the first one so go there first.

cheers, rich
63.flag Richard Fink Comment
11/18/09
BTW- Your stats aren't broken. The country flag is correct. I'm in Aruba, Netherlands Antilles.
64.flag Lost Souls Comment
11/18/09
Great info. I can't wait to get some rock'n roll fonts uploaded on our music site and have some of our old images turned into real text. :) Awesome tutorial, explanation and directions on how to get the @font-face embedding going!
65.flag stk Comment
11/18/09
Richard - Aruba? Sounds fun! Thanks for the links, I'll have to test them out. For the PC, I test against installed browsers and use IETester. I must rely on sites like those you linked to test MAC browsers, since I don't own a MAC.

BTW, a reader (via email) came across a TTF font that wouldn't load in FireFox. In an effort to determine why, I installed FontForge and made some interesting discoveries. I'll be sharing them in an upcoming post. (You work w/FontForge much?)

Lost Souls - Glad you like the tutorial. Thanks for saying so and good luck getting those Rock'n-Roll fonts going (and with the band)!
66.flag Richard Fink Comment
11/19/09
Don't work with fontforge at all, as yet.
big YET. I'm a windows guy who's going to have to invest in a Mac. don't want to go to the installation troubles of installing fontforge on windows.
love to hear what you've discovered.
Major rumblings in the web fonts department over the past few days. Two web fonts related articles in AlistApart:
Alistapart
And my own chirpings from the trees:
An Open Letter To Retail Font Vendors
IMHO - web designers will, and should, become active in screen font design - especially in the tweaking and repairing of existing fonts with open licenses. Unfortunately, I don't believe the "pros", that is, the retail font design community is going to be of much help.
And we'll soon see where Microsoft stands in all this, too.
Let's proceed. (As if we weren't going to!)
rich
67.flag Tom Comment
11/23/09
Hey great article. Was wondering if anyone could help me. I can get the font to work on IE but FF doesnt seem to work? Here is my CSS.

@font-face {
font-family: "TrueCrimesRegular";
src: url(http://www.mywebsite.co.uk/fonts/true-crimes.eot); /* IE */
src: local("true-crimes"), url(http://www.mywebsite.co.uk/fonts/true-crimes.ttf) format("truetype"); /* non-IE */
}

.truecrimesregular {
font-family: "TrueCrimesRegular", verdana, helvetica, sans-serif;
}

h1 {
font-family:"TrueCrimesRegular";
font-weight:normal;
margin: 150px 20px 20px 150px;
}

In the HTML I have also declared the font using the class attribute.

Any help would be greatly appreciated. Ta.
68.flag stk Comment
11/23/09
Tom - Without a link, the only thing I can check is the @font-face syntax (which appears to be fine).

Generally, deployment issues involve one or more of these three things:

1) Syntax;
2) Font file location;
3) Corrupt font files;

To test (2) hit http://www.mywebsite.co.uk/fonts/true-crimes.ttf - If the file downloads, then the font is where the CSS "thinks" it is and you're OKAY.

To test (3) I've generally pulled the TTF file into the Windows Font Viewer or WEFT (tried to convert to EOT). If the file is corrupt, then would be revealed.

HOWEVER: I recently ran into a case where the EOT worked fine for the IE browsers, but the TTF didn't work for FFx, et al. The font file was in the correct spot AND the WinFontViewer saw it 'without issue'. Digging deeper, the problem was with the font file and ... I managed to edit the font file and fix it. (Going to be the focus of an upcoming article).
69.flag Richard Fink Comment
11/23/09
@stk
Until now, the idea of having to crack open a font file and make adjustments was foreign to web design.
But soon, some familiarity with fonts - hey, they are just little databases - will need to become a part of any web designer's skill set.
Looking forward to your upcoming post.
Rich
70.flag Chita Comment
11/24/09
Fontsquirrel has an online tool for uploading fonts and converting them to all webfont formats. Complete with sample CSS, saves you all the hassle. The only minor flaw is that it doesn't do TTF↔OTF out of the box and so some fonts won't render in Firefox 3.5 < 3.6 unless you tell it to "force OTF base format".
71.flag stk Comment
11/24/09
Chita - That looks like a very interesting tool and especially worthy, because of the clean-up and subsetting options. Thanks for posting the link. I'll definitely be trying it out.

PS: Regarding "email required" for commenting ... I've changed that, based on your request ... email is now optional. ;)
72.flag Elody Comment
11/25/09
Thx so much for your aticle about @font-face, I didn't even know this new feature was implemented in Firefox 3.5!

Of course, I have a little problem: what to do - if there's anything to do - when a TrueType font I need SO MUCH, doesn't work with Firefox in TrueType format (Windows browser), but works perfectly in Internet Explorer 6/7/8 and Firefox 3.5 Linux? Yes, I did test on several computers with different browsers, and checked the font wasn't installed in the O/S.

The funny thing is that I converted this original TTF font into EOT format for Internet Explorer (thanks to the TTF to EOT Font Converter, and the EOT format is the one who turns out to be OKAY, but not the TTF, and only in Windows Firefox browser!

BTW, the Online Font Converter doesn't convert anything (file "To" is empty), too bad because I thought maybe I could convert the TTF into some other font format that FireFox could display that correctly.

Then, I tried to download the free font again from other websites, under different names (but still the same font), but it still doesn't work. It's a pity because I really need this particular one for a special project and I even tried to use 2 other similar fonts and the same problem happens!

I tried other completly different fonts to be sure it wasn't a bug from my Firefox 3.5 browser, but they appear quite normaly.

Hum, do you have any suggestion to help me convert or "debug" this damn TrueType font, or just explain a little bit how a TTF font can appear fine in the linux version browser of Firefox 3.5 and not windows XP? :)

Anyway, thanks to anyone who finished the reading, it was a bit long to detail my problem :-(
73.flag Elody Comment
11/25/09
OK I didn't read all the comments and just above my last message, which I typed 2 minutes ago, my eye was lucky enough to read the Chita's comment about the FontSquirrel tool, and it solved my problem in few seconds! Such a great relief! :D
Thanks all of you so much to share your knowledge :)
I just clicked the "Force to TrueType" button radio and my TTF font is now nicely displayed by FF 3.5 windows!
I still don't know why it couldn't before, but anyway ... ;)
74.flag stk Comment
11/25/09
Elody - I know why! It's is the subject of my next article (which I'm starting today) "Fixing @font-face Fonts". (I would be curious to know which font you were having problems using and where I can download it) ;)

I'm very glad to hear that the Font Squirrel tool solved your issue, as it means there *might* be an easy remedy for this kind of problem.
75.flag Elody Comment
11/26/09
Stk, I would be happy to help you test this bug with my font, which is called Vasca Berria TT, and can be found under different file names : vascan.ttf, vasca-berria-ttf.tff or vascaberriatt.ttf.
You can download it here.

Yes, it's a "basque" font, for I'm living close to the Basque Country (Pays Basque) in the south-west of France ;)
Already thx for your next article :)
Keep on the good work !
76.flag Font Squirrel Comment
11/30/09
@Elody - Running your font through the font validation tool called FontLint gives the following errors:

File checksum is incorrect.
Missing required table: "post"
Windows will reject fonts with an OS/2 version number of 0
Validation VascaBerriaTT ...Failed
Self Intersecting Glyph
Missing Points at Extrema
Bad version number in OS/2 table (must be >0, and must be >1 for OT-CFF fonts)
Bad sfnt file header

--------

So, just a bad font all the way around. The conversion process in Font Squirrel obviously fixes some of these issues just by re-rendering them.
77.flag PlanetPaolo Comment
12/01/09
Firstly, STK, a sincere thank you for this article, and to everyone has contributed with their posts!

Now, I have an interesting question re font fallback.

I need to render code points for an oriental culture (Myanmar) that aren't part of 'standard' fonts like 'Arial Unicode MS Regular' and therefore are only displayed as square boxes. So I obtained a specific font that supports them, created the corresponding EOT and got everything to work following the above examples - great!

However, I only need those special code points to be rendered using my new font, while the rest of the app should use my original font(s).
Since font fallback seems to take place on a per-character basis, I'm using something like this:

body { font-family: Arial, "MyNewFont"; }

This works perfectly in IE8 and FF3.5, i.e. only the code points that are not found in Arial are rendered using MyNewFont.
However, IE7 seems to ignore MyNewFont and displays them as square boxes.

If I swap the 2 fonts around and specify "MyNewFont" first, and Arial last, then IE7, IE8 and FF3.5 are all consistently using MyNewFont (which now shadows Arial) and there are no square boxes.

Can anyone explain why the fallback is different in IE7, and if there is a workaround?

All comments appreciated!

Thanks in advance,
Paolo
78.flag Ahmed Comment
12/01/09
@stk
Your technique seems to work perfectly, but for some reason I can't get it to work with all fonts I have with IE while it works perfectly FF.

See, in this page of mine "http://www.ahmedsamir.org/font.php" there are 2 fonts. I loaded them both exactly the same way, files exist, and using the real font names but one of them just won't load. Any ideas what I might be missing?

Regards
79.flag stk Comment
12/01/09
Elody - Thanks for linking the font. I've been working with Ethan (over at Font Squirrel) and others, testing this font in FontForge. The good news is that using this font (and a few other 'problem' fonts), we've been able to help Ethan author significant changes to his font generator (i.e., see the 2009-11-30 release notes on that page).

The bad news is that FireFox still fails on various TrueType fonts (without warning), because of font file problems.

*If* this happens to you again (i.e., FFx doesn't seem to render the font), the best advice is to run the font through the font generator. It will likely fix these problems and allow it to render correctly.

At this point, I'd say, "The best practice for @font-face, after identifying the font you want to use, is to make a font kit using Ethan's Font Kit Generator."


Doing so will likely fix any FireFox rendering problems before you encounter them.

Again, I'll provide detailed reasons & evidence in my upcoming article, "Fixing @font-face Fonts".

Paolo - I'll need to look at your unusual case in more detail, because I need to look into the specification for @font-face (is it meant to fallback on a character-by-character basis?)

Can you link to the two font files? (I'm thinking of a more direct approach: rather than rely on browsers to fallback a certain way, create a single new font, one which contains the union of characters you want).

Need to play more.

Ahmed - The page you link uses two identical "local();" sources, for each of the three fonts. While this is redundant (you only need to use one, unless you know - or think - the font may be installed on visitor machines under various names, then you can use as many "local()"s as you want) it shouldn't be the source of your problems.

The only font you're using with which I have experience is "Lexographer" (used in this article). Lexographer isn't rendering in IE8 for me. The first two appear fine in my IE8. FireFox, contrary to what you said, isn't "perfect" for me. There, the second font isn't rendering.

See my note for Elody above, because that may well fix your FireFox issue. I'm not certain about the Lexographer bit in IE8, as I know it works here, your EOT file location looks OKAY and, besides the redundant "local()" source, the syntax appears to be fine.

Recommendation: Run all three TTF files through the Font Squirrel Generator, upload the resulting files to your server and make certain that each font is rendering as expected. Once each has been "filtered", tested and works ... THEN combine them into your page.
80.flag Ahmed Comment
12/03/09
@stk.
Using "Font Squirrel Generator" was a life-saver for the IE problem. More than likely the problem was in the font conversion, but now I got the problem sorted out properly.

Thanks a lot for the advice :-)

Regards,
81.flag gyo Comment
12/08/09
Hi, thanks for posting a comment on my blog!

It's time to change the way we've always used web-typography ... spread the voice!

82.flag Justin Comment
12/08/09
I can't seem to get this working... I believe I've set it up properly but it still only shows the secondary font, Arial, in place of Helvetica Neue which I've been attempting to embed. Can someone take a peek at www.samuraiprojects.com and let me know what I did wrong? the stylsheet is stuff.css.

Thanks.
83.flag stk Comment
12/08/09
Justin - Take your font and run it through Ethan's Font Kit Generator. It'll spit out all you need, including a test page, which you can upload to your server. ;)

If it doesn't work after that, then come back for help.
84.flag Justin Comment
12/08/09
@stk - thanks. I gave that a try and it now shows up as it should in Opera/FF/IE8 - though still not in Chrome.

Hmm....

EDIT: I had to read further into Chrome not supporting @font-face by default to believe it. I hope this gets implemented soon.
85.flag gyo Comment
12/09/09
@Justin: to have it working on Chrome you need to use the SVG format too. Try adding it in the format types of Font-Kit-Generator.
86.flag stk Comment
12/09/09
Justin - Do not use SVG with Chrome. Yes, it will work, but SVG is a huge file (compared to TTF) and Chrome will support TTF/OTF, just like FFx, Safari, Opera in the "Milestone 5" release (i.e., the gains w/SVG will be short-lived and the cost - of downloading the big SVG file - will remain as long as the SVG is deployed).

Easier and more efficient to deploy EOT and TTF/OTF and just "wait" for Chrome to catch up. ;)
87.flag gyo Comment
12/09/09
@stk: Chrome developers say ttf-otf are already supported in beta builds, but until the day it's released you can keep on using SVG and then take it out.
It seems around the end of this year... let's see
88.flag Justin Comment
12/09/09
@gyo - Thanks, this worked.
89.flag Justin Comment
12/09/09
@stk - I'm not too concerned with the size. the SVG version of my 53K Helvetica Black.ttf came out at 60K. Personally I'm a bit less concerned with an extra half-second of loadtime(for broadband users of course, dialup users in 2009 should know everything will load dirt slow) and more concerned with my visitors seeing a version of the site consistently across as many browsers as possible. As for the next Chrome, I'll make the appropriate changes when it's released. :)

In any case @font-face is something I only stumbled upon in the past few days and I've got you to thank for this incredible tutorial.
90.flag gyo Comment
12/09/09
Glad it helped! :)
Anyway I agree with stk that we just have to wait a bit more, and then get rid of SVG.
So the whole process will be even easier and lighter! ;)
91.flag Ken Comment
01/06/10
stk - thanks very much for the informative article. I believe I followed it to a T but still am not getting this font to show. Any ideas?
92.flag stk Comment
01/06/10
Ken - Not until you link the page on which you're trying the fancy fonts!
93.flag Ken Comment
01/06/10
Oops - sorry you need to input the pswd tqm7 to see the index.htm file
94.flag Dillon S Comment
01/11/10
This is a great write up!

I am very interested in rich text solutions aside from building images / building flash websites.

I think using something like this for body text & something like sIRF for headlines can provide to be a great answer to those dreaming about sharing better text experiences.

If you can design for 90% of browser & have a great fallback for the others that do meet your requirements you will be safe. Just find a good standard font similar to what you want to use as all fallback & all will be good!
95.flag Flavia Comment
01/11/10
The font I used is HoneyScript-Light and it works!

However, how do I set the font-size to be different for the back up fonts?

This script font is set to 30px while Arial would be 14px. So, is there a way to determine this via css?

I'm concerned that if it doesn't work on someones computer, the backup would come up and be huge!
96.flag David Comment
01/21/10
Hi there,

I recently ran into an issue where @font-face declaration (using kits from FontSquirrel) worked excellent when developing locally, but when deployed to a production site, only IE would render the fonts correctly (using the .EOT file).

After doing some digging (inspecting resources in Safari and Firefox), it appears that some issues may be related to just *how* the fonts are returned to the browser from the web-server.

According to the resource inpsector, it turns out that, when developing locally (using IIS 5.1 on Windows XP), fonts declared using the @font-face declaration are returned with a content-type of "application / octet-stream", so @font-face works flawlessly in all the browsers tested (IE7, IE8, Firefox, Opera, Safari).

On our production server (IIS7), the .OTF and .SVG files are actually being returned with a content-type of text/html, which causes a "404 - Not Found" error to occur when the get request is made to get the font file, which thereby results in the fallback font in the font stack being rendered. The .EOT file seems to be returned with the proper content-type, since IE downloads and renders the fonts just fine.

I'm not a webserver guy, so I've got our IT/WebServer manager taking a look. There may be a setting or settings that have to be adjusted in IIS so these file types are served with the proper content-type. I'll post back when I have more information, but this may be an issue for those people that just can seem to get the fonts to render in Firefox / Safari on their production websites.

And, then again, I could just be wrong altogether. I'll let you know as soon as I know.
97.flag David Comment
01/21/10
A little further digging has let me an article on MSDN that may explain the problem:

http://support.microsoft.com/kb/326965

Apparantly, IIS5.1 has wildcard mapping for unknown mime-types enabled by default, where later versions of IIS do not.

Will post again when I have confirmed this.
98.flag David Comment
01/21/10
Okay, it's confirmed. In IIS6 and later, you must add a mime-type of application/octet-stream for both .OTF and .SVG in order for those types to be served properly on windows-based servers.
99.flag stk Comment
01/21/10
David - Thanks for the info.

I have run into MIME-type issues on Windows servers before. (We're now on a Linux-based server).

I'll add this info under "notes", which might help others! Again ... thanks!

EDIT: Added a troubleshooting section (see the 21-Jan-2010 update) ... cheers!
100.flag David Comment
01/21/10
@stk - You're most welcome.

I actually happened across this site in my search to find a solution to this problem.

I'm a firm believer in sharing solutions!
02/01/10
You should note that some font vendors do not allow @font-face because they feel it does not properly protect their fonts.

For a specific example, fonts.com will only license their fonts for commercial websites using Microsoft EOT or sIFR.
102.flag gyo Comment
02/01/10
@Lawrence Sinclair:
Actually it's in the post...

[quote]
Just upload the font file you want to use to your server - making sure that you're not violating any copyright rules - then embed it, using the following CSS...
[/quote]
103.flag Thong Tran Comment
02/02/10
Really nice post. Works well on FF 3.5, Google Chrome 4, IE8, Safari 4
104.flag Bart B Comment
02/03/10
This post is helping me alot with my sister, on her website. As she is a designer/artist she of course wants a very nice looking website. :) This information could even be integrated into template designing applications. I'll add it to FreedomEditor.. In case I make you curious, just give me some time ... LOL
105.flag Ben Comment
02/12/10
What about aliasing?

With Cufon, fonts look smooth and beautiful but when the same font is embedded via @font-face it looks very messy... why?!

Is there anything I can do?

106.flag Richard Fink Comment
02/24/10
Hey Scott and family:

If you're going to be using @font-face web fonts check out this new free tool: EOTFAST

EOTFAST is a utility for creating natively compressed EOT files for use with any domain. Convert once, use on any site. Savings in file size typically range from 45% to 70%.

It's fair to say that other conversions utilities like Microsoft WEFT or ttf2eot are now obsolete.

For example, a first-rate screen font like Droid Serif starts out at 169kb as a TTF with the full character set, but as an EOTFAST file it weighs in at only 80kb. (With still the full character set. Compression is lossless.)

The documentation contains information for designers looking to prepare fonts for use on the web.The download package also contains a HTML "EOT File Integrity Test" page and a helpful "fallback" test font.

EOTFAST is a must-have for anyone looking to use @font-face web fonts today.
107.flag stk Comment
02/24/10
Ben - This issue is beyond the scope of this article. While there are rendering issues, I believe as @font-face gains traction, browser rendering and support will become only better and consistent.

Richard - I noticed that Paul Irish included EOTfast in his presentation - Squeezing the Best out of Web Fonts! Thanks for the link, I'll definitely check it out.
108.flag Richard Fink Comment
03/06/10
Hey STK, time for an update.
Opera 10.5 has pretty decent @font-face support at long last.
See Opera 10.5 comes through for details.
Now, it's a clean sweep.
Rich
109.flag Tim Comment
03/27/10
Question for you, I created a eot file and it worked great locally and on my fatcow hosting so I then uploaded it to a godaddy hosting and it doesnt show, now I understand you have to specify the root so my question is that if I use a ttf converter do I still have to use the weft tool and specify the root? I tested this on a fatcow hosting and it worked without using the tool so I am not sure if there was something left over from the last attempt.

Thanks
110.flag stk Comment
03/27/10
Tim - No. The whole "allowed root" thing is a WEFT construct. WEFT is a clunky solution, at best. Instead, use Ethan's online Font Squirrel generator, which obviates the need to specify the deployment location. It's easy-to-use and when complete, you end up downloading EOT, TTF and a working HTML & CSS sample.
111.flag Der Lee Comment
04/29/10
i have srching for a long time for this, thnx man
112.flag etcwd Comment
04/29/10
Thank you very much for sharing this awsome css trick. I've been searching for this for a long time and finally I found it here. :) Thanks again
113.flag Sam Comment
04/30/10
Hi Scott,
impressive article - sounds so good that it's almost incredible.
But it works, that's great.

Just some question here and wondering about your opinion.

As you said Internet Explorer used the the font-face rule with .eot files since version IE4 in 1997 - all IE versions including 6,7 and 8 work with it. The market share of IE back in 1994 was an impressive ~90% (if I'm right) but it never succeeded and it was dropped. Why did they drop it? I guess because of the font licensing issue. As you are downloading font files and distributing fonts which might be under copyright it would infrindge copyright laws. So my question is why should that now suddenly work? The copyrights are still there and the principle is the same...?

I guess this is why font replacement techniques as sIFR and cufon popped up - but even they have downsides as we know.

To me, the technique works and it is indeed nothing new, not even the fact that it works on 95% of browsers (as it did back in the 90's) but is it "the solution"? So would you use the technique for a client like adidas let's say using a Frutiger or Helvetica?

I guess no.
114.flag gyo Comment
04/30/10
Hi Sam,
You can only embed fonts whose license allows you to do so.
In the example you made, I think for a big client it's worth to contact the font's copyright holder and buy a different license, which will allow to embed the fonts.
115.flag stk Comment
04/30/10
Sam - It "suddenly" works because browsers (other than IE) are honoring the reintroduced CSS3 @font-face recommendation. No, font-embedding isn't "new", as you pointed out. What is new, is cross-browser support for font formats other than IE's proprietary EOT fonts (i.e., TTF, OTF and SVG formats).

Font replacement techniques cropped up as a way to achieve cross-browser support for "fancy fonts", but IMO are way more complicated and convoluted than need be.

Yes, there is a whole issue of font copyright (similar to image copyright and content copyright). I would ammend Gyo's response by saying, "You're only supposed to embed fonts whose license allows you to do so." (Not everyone plays by the rules).

Would I use this simple, cross-browser CSS3 technique on a large client site? (e.g., Adidas.com) You bet! (but I'd also make certain to avoid any copyright infringement, whether that involved paying for a font or not. I'd highly recommend to Adidas that having written proof of permissions was necessary and even to the point of adding it to a colophon page, to avoid ambiguity).

Hope this helps, Sam. Cheers - stk

116.flag andrew Comment
04/30/10
can you not use full URLs for the src of an embedded font? it doesn't seem to work if I try it (unless the full URL is the same domain that the page is being served from...)
117.flag stk Comment
05/03/10
Andrew - I believe you can, but I don't and don't recommend it.

Instead of using http://www.domain.tld/folder/font.fmt, I'd recommend instead using /folder/font.fmt.

Reason: Both point to the same location, but the second is domain independent (i.e., you can move your page(s) to another domain name and they'll work without intervention).

If you're still keen on fully-qualified URL, please let me know and I can test it. I'm also curious as to why one might want to us a fully-qualified URL.
118.flag Niall Campbell Comment
05/05/10
Nice tutorial, had a few issues with my code when applying this to Firefox 3.6.3:

-@font-face should not be inside @media declarations
-doesn't work with the font shorthand, ie. firefox doesn't like font: normal 1em/1.6em " your FontName ", Arial, Helvetica, sans-serif;
119.flag stk Comment
05/05/10
Niall - Thanks for your comments. Nice to know regarding @media.

I've not had problems w/font shorthand? (View source on this tutorial to see it used.)

However, out of habit, I generally use single names for fonts, obviating the need for double quotes.
120.flag Videot Comment
05/26/10
I am having problems with embedding fonts on http://amharic.globalreach.org and having them display on IE. If I have a local "Ethiopic" font on my machine AND it is specified for Ethiopic text under Tools/Options/Fonts, then it WILL display.

If I don't have a local "Ethiopic" font on my machine, then it DOES NOT display on IE. Of course this is a problem, since this displaying uninstalled fonts is the whole point of the exercise!

Firefox is not affected by this problem.

I will confess to not having done the "selector" you have done. First things first. It looks like a great trick though!

Thanks for any help or insight that you can give.

Videot
121.flag stk Comment
05/26/10
Videot - First, what language is "am"? (It's not on the MSN list).

The good news is that I can grab your CSS file and download the EOT file. The bad news may be two-fold.

First, the CSS you're using isn't the recommended cross-browser CSS covered here. Not sure if that's the problem, but I'd recommend using it. It's tested. It works.

Secondly, you're grabbing that EOT file off a 3rd-party server. *IF* WEFT was used to make the font file, you may *never* get it off that server (see notes about WEFT in the article - requires user to specify hosting servers). Also, there's no guarantee that the file isn't corrupt (plus dependencies on 3rd-party servers is never a good thing).

Recommendations: (a) use the syntax outlined in this article and (b) grab the original TTF file and run it through Font Squirrel's Generator to get (and host) your own TTF and EOT files.

Hope this helps.
122.flag Videot Comment
05/26/10
am is Amharic, the national language of Ethiopia. According to http://tlt.its.psu.edu/suggestions/international/bylanguage/ethiopic.html AM is the code for Amharic/Ethiopic text.

Okay, I will try both your recommendations.

The third-party server is my personal server, which I am using because I have more access to than the corporate server (one reason why one might use an absolute URL). I created the EOT's involved and enabled all the domains. Still, I see the possibility that a firewall somewhere may be mucking things up.

So to clarify a relative file reference. If I leave off the path, does the eot/ttf files have to be in the CSS directory or the html directory?

Thanks so much for your help!
123.flag Videot Comment
05/28/10
It works!

I had to remove all the fonts, except the embedded font, so apparently I had too many.

But now my .eot and ttf is on the same server and the code is cleaned up.

Thanks!
124.flag Matt Comment
06/07/10
Thank you thank you thank you for this post! I've been working to embed a font for an artists's website and this post got it all working for me. Great job including all the necessary info and I'll be sure to pass this post along! The link to the TTF > EOF converter was also very helpful.
125.flag Lthm Comment
06/29/10
This is awesome! thx for the info! very helpful :D
126.flag Karol Comment
06/30/10
Great work! Many thanks.
127.flag Sid Comment
07/04/10
can i specify web url of uploaded font in src:url()

i hv tried it works well in opera, safari and chrome but not in ff
128.flag stk Comment
07/05/10
Sid - Yes, that's pretty much the point of the url() bit. Read the comments and you'll see my recommendations on the usage of this (i.e., no 3rd-party servers, special directory & relative -vs- absolute reference). BTW ... works fine in Opera 10+, Safari, Chrome 4+, IE6/7/8 & FireFox 3.6+
129.flag Guiye Comment
07/20/10
IE7/IE8/IE9(preview beta), Opera, Safari, Firefox,Chrome, All Work fine, but IE6 is impossible, I try everything, WEFT, FontSquirrell, ttf2eot, add my domains, edit my htaccess, but no way.

curiously, in my local webserver, (xampp) IE6, YES, its work
The problems is in my internet Web Hostings.

Any Idea?
Thanks
130.flag stk Comment
07/20/10
Guiye - Are you on a Windows-based server?

EDIT: Hmmm. Guess that's a "no" if you're running XAMPP locally - wasn't familiar with the program and had to look it up.

Can you paste a link to your page that's using the font? (Is it an obvious font?)

You might want to have a look at your server logs and see "what's happening" to a call made by an IE6 browser.
131.flag Duda Comment
07/21/10
hi thank you very much for your Article.

I just have one question how do i embed more than one font type.

i have on the server all Helvetica Neue in the different formats.
like
HelveticaNeue-CondencedBlack.eot
HelveticaNeue-Regular.eot

HelveticaNeue-Regular.ttf
HelveticaNeue-CondencedBlack.ttf

how do i do on the css?
suould i do 2 font selectors

@font-face {}
@font-face {}

or i can i call all the fonts on one font selector?

Thank you very much,
Duda
132.flag stk Comment
07/21/10
Duda - Your solution is easy. Just "view source" on this article (as we are using 2 embedded fonts here). ;)
133.flag Guiye Comment
07/21/10
First, sorry by me english.
Finaly found a solution, is bug in IE6 that prevent cache files in subdomains (just I made my tests in subdomains). When I tried in my main domain I did not have problems.
In order to solve this behavior one is due to include in .htaccess:

# Force cache in subdomains for IE6
    Header unset Cache-Control
    Header set Cache-Control max-age=604800
    BrowserMatch "MSIE" force-no-vary


(sorry i cant put pre tag for correct .htacces syntax)
Finally I have observed that does not make conditionals or other fixes, with the following code will work anywhere, a subdominion or not. And with any Browser IE6+ or Non IE (FF, Opera, Chrome, Safari, etc)


@font-face{
font-family:'Essays 1743';
font-weight:normal;
font-style:normal;
font-variant:normal;
src:url('essays1743-min.eot');
src:local('Essays 1743'),
url('essays1743-min.ttf')
}



Thanks for your job
134.flag Duda Comment
07/21/10
Hi STK,
THANK YOU VERY MUCH,
YOU ARE A STAR.

I will let you you the final result of the website.

Thank you,
Duda.
135.flag stk Comment
07/21/10
Guiye - Glad you found a solution and thanks for sharing it (that's a new one)!

What is the reason for unsetting, then resetting the cache-control with a different max-age?

From a quick Google search, it seems the only bit really needed is this:

BrowserMatch "MSIE" force-no-vary

Duda - No worries. Hope you get it sorted.
136.flag Duda Comment
07/21/10
well,
its running ok on my machine but,
on my girlfriend pc (windows xp) on Firefox the font doesn't show properly.
src: local(" real FontName ")
what you mean here with "real FontName".
the files on the server are:
HelveticaNeueCondensedBold.eot
HelveticaNeueCondensedBold.ttf
what should i write there?
thanks,
Duda.
137.flag Guiye Comment
07/21/10
Years ago i found the same problem with jpg, css, and .js files.
Suddenly I think, Maybe is the same with .ttf and .eot files, Then I review my old code, and simply copy/paste. If possible i use the others .htaccess directives for another reason (i dont remember). In conclusion. i tested it!

BrowserMatch "MSIE" force-no-vary

Fix IE6 caching bug

today i search in google and found more details in
http://www.lagom.nl/web/ie-caching.html

Thanks again stk
Regards

138.flag stk Comment
07/22/10
Duda - Which font doesn't show ... #1 or #2 or either?

"real-font-name" means "the font name that's likely to used on a local machine" (if it's found on a visitor's machine, it'll use THAT font, rather than download the version on your server).

You'll want to check why FireFox isn't downloading your TTF file (is it where it "thinks" it is?)

A link to your page would help.

Guiye - Yes, that's one of the pages I found while Googling for the problem. Thanks for your feedback! Glad you got it sorted.
139.flag Duda Comment
07/22/10
Hi, i think all is in place. Here is the website:

http://www.eggzpress.com/wordpress

Please don't pay much attention to the text formating, as I'm still building it and it's not ready to be shown. :)

If you could check on IE and Firefox, I would be very thankful ... well I aready am. Thank you very much for all the help,

Duda
140.flag Guiye Comment
07/22/10
Stk - Duda

I test your page with FF, is a specific problem between FF and yours .ttf, (some type pf copyright restriction?, i dont idea)
But, I "playing" with WedDeveloper CSS editor Firefox ADDon and load many others .ttf from mi site using full url's, and all work fine !!!
No problems report for Opera and IE
Bye
141.flag devon Comment
07/23/10
for some reason it works fine for me in chrome but not in firefox.. i tried different fonts and had some working in both but now i can't get any to work in firefox..

my page has ugly inline style all over it right now.. so please ignore that crap but if you could let me know what i'm doing wrong that would be much appreciated!

http://www.thehordeandtheharem.com/test

the code:

@font-face {
font-family: "karine";
src: url("karine.ttf") format("truetype");}

.hh {font-family: "karine", tahoma;
font-size:19px}

.heading {font-family: "karine", tahoma;
font-size:48px}


i've tried it with and without quotes everywhere, and with the font in a separate folder or just in the root to simplify the url.. still not working in firefox (or opera) - just chrome. actually i'm using chrome plus...
142.flag Guiye Comment
07/23/10
Devon:
Your @font-face code it's ok, but...

.fineprint{position:absolute;
left:50%;
margin-left:-400px;
bottom:50%;
margin-bottom:-295px;
text-align:center;
font-family:verdana;
font-size:9px;"}

is wrong, remove the double-quotes in the last line (font-size)

bye
143.flag devon Comment
07/23/10
oh wow. i'm retarded.. thank you for catching that!!
144.flag stk Comment
07/23/10
Duda - Firstly, on your site the left-hand menu text (About Us, Portfolio, etc.) relies on JavaScript for formatting. Looks like crap in my FireFox browser, which I normally run w/JS disabled. I don't see any reason why that relies on JS (?) and I'd recommend changing that to CSS, so it looks good no matter what.

Secondly, after having a look at your style.css file, I think your problem is what I thought - "Where your font files are isn't where the browser expects them". I looked at your H2 tags on this page (i.e., "WE ARE HAPPY..."). I see h1 through h6 all use the "CondensedBlack" font family, which is defined as being url('HelveticaHeue-CondensedBlack.ttf').

The problem is likely that the CSS file is in some template directory, along with the font files (e.g., http:⁄⁄yoursite.com/wp/template/name/). Some browsers will look for files relative to the CSS file, so that 'font.ttf' can be found in http:⁄⁄yoursite.com/wp/template/name/, but others can't. According the the CSS, FireFox is looking for the font in http:⁄⁄yoursite.com/font.ttf (and not finding it).

What I recommend is this. Create a fonts directory off your webroot (typically "public_html" (e.g. http:⁄⁄yoursite.com/fonts) and put all your font files in there. Then, in the CSS, use a simple, absolute reference to the font file location url(/fonts/font.ttf). This will keep your fonts neatly organized, keep your CSS simple and - more importantly - fix your problem.

PS - The "egg/brain" logo design work is very well done!
145.flag Duda Comment
07/23/10
i have converted the fonts to .ttf again using an online converted, http://onlinefontconverter.com/, and now the font its running on FF on XP (my girl's computer).

i uploaded the site to the right location so ROOT http://eggzpress.com. and its with the right content already.

As im not a html developer, and i needed to have this done quickly, i used as a base a template, that after i completely customized.

so Im not sure how to change the menu from JS formatting to css.

Do you still have the problem seeing the menu.

IM GLAD THAT YOU LIKED THE LOGO.

thank you very much,
Duda.
146.flag devon Comment
07/25/10
So I got it working fine in non-ie browsers - but no luck in ie. i used the online converter tool, uploaded the eot files to the fonts folder, and loaded them first in the @font-face code, yet nothing - i'm using 64bit ie 8. Can anyone tell me what i'm doing wrong? the page is at www.thehordeandtheharem.com and here's the code:

@font-face {
font-family: "karine";
src: url(fonts/karine.eot);
src: url(fonts/karine.ttf) format("truetype");}

@font-face {
font-family: "harting";
src: url(fonts/harting.eot);
src: url(fonts/harting.ttf) format("truetype");}

@font-face {
font-family: "loveya";
src: url(fonts/loveya.eot);
src: url(fonts/loveya.ttf) format("truetype");}
147.flag Guiye Comment
07/25/10
Devon:
I think your problem is relative to your webserver or maybe the frames structured page.

view this url please
http://foros.emprear.com/@font-face/font-face-html5.html

Work fine in my IE64
I suggest use full url .eot file in the Css

Regards
148.flag devon Comment
07/25/10
thanks for your help, but i figured it out.. it wasn't the url, it was that i had removed the scr:local part of the code, since i thought that was only to see if the viewer had that font installed (and i'm sure they won't) but then i had two src:url lines in a row and ie was using the second one (with the .ttf file) which it couldn't use.. replaced the local part and it works fine now!
149.flag Dan Comment
07/31/10
been getting into this font embedding lark, started by using the font squirrel generator but had problems with opera, was blaming opera but it turned out the problem is with font squirrel

used these usefull places for conversion

http://www.freefontconverter.com/
http://www.kirsle.net/wizards/ttf2eot.cgi
http://people.mozilla.com/~jkew/woff/
150.flag Serrano Comment
07/31/10
Hello. Thanks for this great tutorial, it has really helped me.

By the way, you can add the following point to "Problems?":
- If you're on a UNIX system (e.g. Linux, Mac, etc), make sure the font files are readable by the server. That means, give the fonts read permissions for 'Others' as well. You can use this command to do that: chmod +r fontname.ttf

Took me a while before I figured this out on my server :S
151.flag devon Comment
08/01/10
okay, new issue.. i installed the simple php blog in an iframe in my site. i added the @font-face to the css file that goes with the php blog. it works fine in opera, and chrome, and ie, but not in firefox! i have no idea why.. any help would be much appreciated, thanks!

http://www.thehordeandtheharem.com

152.flag stk Comment
08/08/10
Serrano - Sounds intuitive, but I could see where it might trip someone up (there's so many places that problems hide, sometimes it's not readily apparent that it's a "simple" thing, eh?). Will add & thanks for the note!


Devon - An iframe inside a frames site? Let me be the first to say, "blech"! I'd recommend removing frames, as it's an ancient (and problematic) layout constructor.

Regarding the @font-face. I found one of your fonts here but notice you're using a "relative" location in your CSS - that is url('fonts/karine.ttf').

Try changing it to the fully-qualified (absolute) URL linked above and see if FireFox give you satisfaction. ;)
153.flag devon Comment
08/09/10
thanks for your response... as far as the relative url goes, it's not that, the font worked fine with the relative url and the whole url, UNTIL i added the php page in the iframe - in the php page's style code i use the full url, and it works in all browsers except firefox. the only place i'm using the relative url is for the rest of the page (not the iframe) and it works in firefox. so that's not it.. any other ideas?

and as far as frames go, i'm only using an iframe because i know of no other way to contain a php generated page in an existing page - is there one? i assume i could make it all one huge page, putting all the html AROUND all the php stuff, but i don't really know how to do that and then i'd have one HUGE index page instead of a simple index page with seperate php sections in their own iframes like i have now..
154.flag stk Comment
08/09/10
Devon - First, I can't imagine that adding a PHP page in an iFrame would affect fonts on the rest of the page. Second, there's a big difference between "frames" and "iFrames".

Re:relative ... the "rest of the page" didn't work in my version of FireFox w/relative urls (which is why I suggested absolute). I can send a screen dump, if you want.

Dunno what to suggest. I'm afraid you're treading new water, AFAIK. I'd still recommend avoiding a frames page (for a variety of reasons).
155.flag devon Comment
08/09/10
by rest of the page, i assume you know which parts i mean - everything not in the iframes. on my (latest) firefox the rest of the page works fine, and was not affected by adding the iframe. it's just the content IN the iframe that doesn't work. and again, it does work in opera, safari, and chrome. ONLY not firefox.. which seems odd. the index.html has the style code in it, and works fine. the php blogs that i implemented in the iframes, each have separate style.css pages, and on each of their style pages i put the @font-face code with the whole urls..

do you have any suggestion as to how to avoid the iframes? the only reason i'm using them, and the php blog at all, is so that the other people in my band, who do not know html, can easily log in and update the website themselves.. i know no other way of doing this, but would love any suggestions.. thanks!
156.flag stk Comment
08/13/10
Devon - Emailed you privately. Hope it helped. -stk
157.flag daneru Comment
08/23/10
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.
158.flag mach Comment
09/17/10
The new IE9 now supports TTF embedding. While this is a good thing, it poses new problems because you will want the IE9 not to use the EOT font, but the TTF font instead (if you have a font with OpenType features, that is).

So yet again, we have to revise the way how @font-face embedding must be coded.

I am making tests with conditional comments. I have deleted the EOT @font-face rule from the normal CSS and put it into its own CSS file. Then I have included that special CSS file with a conditional comment before the other CSS:

<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="iefonts.css" /><![endif]-->
159.flag Levi Szekeres Comment
09/22/10
Yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes, yes! Thank You!
160.flag stk Comment
09/22/10
That's a lot of "yes"s Levi. LOL @ "No IE Please". Interesting design, (when I checked in a proper browser).

Glad the article was of some help!
161.flag Lennart Comment
09/24/10
I can't seem to upload the fonts to mys erver without them turning out empty (0kb files), do you know about this problem?
162.flag Sam Comment
09/29/10
Internet Explorer 9 seems also to support this. So the old days of unsopported fonts are over...
163.flag Nephilin Comment
10/15/10
Hello, thanks for that awesome tutorial, it is helping a lot.

I'm making a website wich need that kind of tool, beccause of ther servers languages behind.

Unfortunely, on my test, it wont work on IE, it only work if the font is installed into the windows directory.

http://www.oniryk.fr/test/test-font-css3.html

Have someone an id of why it wont work ?
164.flag Nephilin Comment
10/15/10
Found it - the web addresses you gave to convert the .ttf into .eot seems to not work well, with the files they return to me it, dosn't work with IE, except if the font is linked in the /font/ directory of windows.

My solution: Font Squirrel

Thanks again for your tutorial :)
165.flag Гость Comment
10/18/10
under opera 10.63 that method doesn't work
166.flag stk Comment
10/18/10
Гость - Works fine for me?

Here's a screen dump of this article, taken using Opera 10.63 (build 3516). See the fancy fonts? (Me too!)

Nephilin - Glad you got your problem sorted. (See my 21-Jan-2010 Update ... just late in the doing of it.) ;)

Sam - I've not yet tested in IE9, but glad to hear the news! Thanks.

Lennart - 0 KB files would indicate either a problem with your upload method or font file generator. It's the first I've heard of such a problem. Good luck!

167.flag Гость Comment
10/19/10
168.flag stk Comment
10/19/10
Гость - Dunno what to say. Pictures don't lie, eh?

Your O/S is different (running WinXP sp2 here). Maybe that's it?

Can't say it's "blanket" Opera v10.63 ... must be some odd combo.
169.flag Karkut Comment
10/26/10
hey stk!
great article, i've been struggling with something all day though before I found this place:
have you noticed problems in trying to use multiple fonts with @font-face in IE?

thanks for any input you may have
170.flag stk Comment
10/26/10
Karkut - Used two in this article? (so ... no ... no problems so far).
171.flag Karkut Comment
10/26/10
ahhh woops. I just realized that wasn't my issue at all. how silly. thank you though! I just didn't have proper IE syntax and it was merely pulling one of the fonts that happened to be installed on my machine.
172.flag stk Comment
10/26/10
Karkut ... no worries. Speaks to #8 on the "hints & tips" list! (Been there, done that!) Good luck!
173.flag Karkut Comment
10/26/10
hey stk, would you care to look at this? perhaps there's something obvious that i'm not seeing.

@font-face
{
font-family: "adlertype";
src: url(./fonts/adler.eot);
src: url(./fonts/adler.ttf);
}
@font-face
{
font-family: "uncletype";
src: url(./fonts/UNCLETYP.eot);
src: url(./fonts/UNCLETYP.ttf);
}

those are in my css file, which is located in a common folder on the web root. within that common folder is the fonts folder, those links are accurate. unfortunately, all day i haven't been able to get the fonts to load in IE8. only when i designate the local name of the font. i've been trying a lot, but maybe you have a troubleshooting angle i haven't tried
174.flag Karkut Comment
10/26/10
aha!! sorry for the flood of messages in the short amount of time. we all know the mixture of desperation and frustration that comes with hours of troubleshooting!

i've figured it out at last!
@font-face
{
font-family: "adlertype";
src: url('./fonts/adler.eot');
src: local('?'), url('./fonts/adler.ttf');
}
@font-face
{
font-family: "uncletype";
src: url('./fonts/UNCLETYP.eot');
src: local('?'), url('./fonts/UNCLETYP.ttf');
}

adding the local command with a '?' as the value seems to have done it! i remember reading that the local needed to be there, but wanted to test without loading the font off the machine.
thanks for the article and patience with my messages! It's been a while since i've developed.
cheers.
175.flag Rolf Comment
10/28/10
Thanks!! Thanks!!! Thanks again and again!! Great write up! uhuuuuuuuu
176.flag Marcus Pape Comment
11/18/10
Thanks for putting this together. Very informative. Cheers!
177.flag Randy Comment
11/18/10
This is great and has helped me a ton, so thanks!

I am wondering if anyone knows whether browsers know to download the font file(s) before attempting to render the page? If not, then what happens? Does the text show up in a normal or default font until the download is complete and then reformat itself? Or would the user have to reload once the font files are in their cache?

I ask because I have seen strange behaviour, specifically in Safari, where the first time I hit reload on my test page after making a change the text is normal, but then if I hit reload again it shows the font.

Thanks in advance for any insight on this topic.
178.flag stk Comment
11/18/10
Randy - I'm no browser guru, but it's my understanding that most of the major browsers - except FireFox - don't render the page until after the font is downloaded. As noted in this 2009 article, that can cause problems on a slow connection.

FireFox typically renders un-styled text first, then (once the font is downloaded) it will re-render the page, using the spiffy font-face font. (Called FOUT, there are some techniques one can employ to get around it).

Not heard of the what you're reporting, but I have a couple quick thoughts: (a) What O/S-browser combo are you on? (i.e., XP/winSafari or OSX/Safari?) and (b) Are you seeing a similar behavior with this article (or another page using @font-face)?
179.flag sohbet odaları Comment
12/10/10
Hey, I just hopped over to your website thru StumbleUpon. Not somthing I would typically browse, but I enjoyed your thoughts none the less. Thank you for making some thing well worth reading.
180.flag Kari Sletten Comment
12/11/10
This is a fantastic article. Well written, extensively researched, clear instructions... you're amazing!

I've only recently begun designing websites and just assumed that there'd long been a way to do this. I was pretty surprised to find out how new the technique is.

I couldn't be happier!
181.flag Oliver Comment
12/27/10
Great article, been through hours of scripting trying to add fonts for clients. Now I can do some more testing for the company.
182.flag D. Strout Comment
12/29/10
I am making a rendition of Monopoly, and I wanted to use an appropriate font. I came across this article and used the procedures found in it. It took forever for me to get it to work, but I found that the problem was that in IE, you can't do something like this:

src: url(data/KABOBE.eot);

I had to put it in the same folder as the page and do this:

src: url(KABOBE.eot);

As I said, this is in IE. I'm using IE because I'm making the game as a .HTA (more info at http://msdn.microsoft.com/en-us/library/ms536496%28v=vs.85%29.aspx). Whether the problem is in IE as a whole, or just the fact that I'm using a .HTA, I don't know.
183.flag stk Comment
12/29/10
David - I don't think HTA is an issue.

Without a link to your page, I can't verify, but "data/KABOBE.eot" should be off of whatever folder contains the CSS file (e.g., http://yoursite.com/.. ../style/data/KABOBE.eot).

See item #6-2 in the "Tips" section above.

184.flag D. Strout Comment
12/29/10
Ah... yes, you're right. I usually use absolute paths myself, as you said in tip 6-2, but this isn't a page on the internet; it's on my hard drive. To use absolute paths, I would have to type /Users/David/Desktop/Monopoly/data/KABOBE.eot, and if I were to move the Monopoly folder (which is fairly likely), that wouldn't work anymore. Relative makes more sense, but I forgot the font had to be relative to the CSS file. Thanks for pointing that out, another of my many "DUH!" moments.
185.flag stk Comment
12/29/10
David - No worries. Glad you got it sorted. Don't feel too bad. I have lots of "duh" moments too! :p
186.flag Alex Comment
01/07/11
Thanks, great tutorial. I still can't make the EOT files to work for IE for some reason, though...
187.flag stk Comment
01/07/11
Alex - Your problem is that IE doesn't like poker sites. ;)
188.flag oghuz Comment
02/11/11
uyphp.net
font name is Alpida Unicode System
it's normal in IE , but firefox is not
css is here
@font-face{
font-family:Alpida Unicode System;
font-weight:normal;
src:url('http://www.uyphp.net/eot.eot');
src : local( 'Alpida Unicode System' ), url(http://www.uyphp.net/Alpida.ttf) format( "TrueType" );
}
189.flag stk Comment
02/11/11
oghuz - At first glance, it looks like your problem might be covered in "Tip 6.1" (syntax), as font family names containing spaces need to be wrapped in double (or single) quotes.

Also, I believe that "font-weight:normal;" is the default and unnecessary. (I assume the EOT filename is correct on your page, as it's eot.eot here and [not found] ... the TTF was, however). ;)

Hope this helps.
190.flag alhamd Comment
02/16/11
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 using this technique?
191.flag Ed Comment
03/03/11
For those of you wondering why IE isn't handling multiple @font-face calls:

#2 under Hints above is more right than I initially thought. You need to declare ALL .eot before any others. Essentially put an <!--if IE> statement BEFORE your CSS include, and use a <style> tag to make @font-face declarations for IE only.

<style type="text/css">
@font-face { font-family: 'Myriad'; src: url('/fonts/MyriadPro-Regular.eot'); }
@font-face { font-family: 'MyriadCn'; src: url('/fonts/Myriad_Cn_Semibold.eot'); }
@font-face { font-family: 'MyriadSemi'; src: url('/fonts/MyriadPro-Semibold.eot'); }
@font-face { font-family: 'CenturyGothic'; src: url('/fonts/Century_Gothic.eot'); }
</style>

IE will set the fonts appropriately and gloss over the declarations in the CSS. Took me quite a while to figure this out, so I thought I'd share.
192.flag Duncan Comment
05/03/11
Informative write up. Personally I found it a bit 'dragging' and when you're looking for a quick fix (and i would guess most people are) it's a lot nicer to have a brief and concise solution to make it work as apposed to a lengthy explanation on the background workings.

This is intended to be a constructive criticism to help your future posts and is not to knock you down.
193.flag stk Comment
05/04/11
Duncan - Thank you for taking the time to comment. The "Get out of Font Hell" Community Chest card is meant to link to your "quick fix" (bookmarks tip #1 ... a simple x-browser font workflow). Perhaps I need to make that a tad more obvious?
194.flag Bob Comment
06/20/11
This was a great writeup; I tried many combinations, never thought to add the local("realfontname") to the line for non-IE browsers. without that, some browsers didn't function properly. Odd, but true.
195.flag Zero13 Comment
06/29/11
Someone please help me Embed fonts to IE. I cannot make it work, i tried everything, but still it is not good. If someone has a little time, please send me and e-mail, i would aprishiate it very mutch.

Please: zero13@citromail.hu
196.flag Romi Comment
07/05/11
Awesome!! dude
197.flag david Comment
07/20/11
I am a fairly new programmer and long time designer so this is my first attempt into using web fonts and I just have to say this was an excellent post and find. TY TY TY TY TY TY TY TY TY TY! And Thank you!
198.flag Jen Comment
07/29/11
@font-face {
font-family: 'HoneyScriptLight';
src: url('HoneyScript-Light-webfont.eot');
src: url('HoneyScript-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('HoneyScript-Light-webfont.woff') format('woff'),
url('HoneyScript-Light-webfont.ttf') format('truetype'),
url('HoneyScript-Light-webfont.svg#HoneyScriptLight') format('svg');
src: local(" HoneyScriptLight "), url( HoneyScript-Light-webfont.ttf ) format("truetype"); /* non-IE */

}

p.font {
font-family: 'HoneyScriptLight';
text-align:center;
font-size:30px;
font-style:normal;
font-weight:bold;
}

I have this in my CSS and I cannot get safari to work. It works fine in every other browser, but this one. Can you please help? thanks!
199.flag Todor Comment
08/03/11
Thank you very much for this great article.
200.flag mitja.gti Comment
08/05/11
Wow! Thank you for the tips, you saved my day :)
201.flag Jan Comment
09/01/11
easily the best post about web fonts and font-face currently available on the internet.

highly appreciated
202.flag Nathan Comment
09/30/11
Great article!

I am wondering if the default behaviour is for the font to be loaded from the server when it is actually called (or used on the page) rather than on page load ?

Reason is that i am building a page where the text is created and formatted dynamically, and i intend to have quite a large library of fonts, and i want to avoid a massive download initially, so i started to think about dynamically loading the @font-face using javascript for each font when it is required, but then i noticed that it seems to do this by default ? (in FF anyway)

If this is the case (that the fonts are loaded only when used) then is this the default behaviour of all browsers ?

Thanks ;)
203.flag stk Comment
09/30/11
Nathan - Good question! Different browsers load fonts differently. For example, IE downloads the font as soon as it sees @font-face in the CSS (i.e., loads the font whether it's used on the page or not).

Because I only load fonts if I use them on a particular page, I've not concerned myself much about fonts that I don't want to load. However, you might find the article "@font-face and performance", by Steve Souders, useful.

Also, the TypeKit blog discusses "Better web font loading using JavaScript", which may provide the kind of control you might need for your font library?
204.flag Nathan Comment
10/05/11
Cheers... thanks for the info & links ;)
205.flag Roxanna Comment
10/06/11
So I have read through this post several times and have tried several options but I am unable to get my font - Beatty to show up on Firefox on my PC, nor on Google Chrome. It shows up fine on Firefox Mac, Safari, IE. I have explained it in detail on Stack Overflow. http://stackoverflow.com/questions/7616849/font-face-working-in-firefox-mac-ie-safari-etc-but-not-firefox-pc

I have tested it by changing the font names. So what I've discovered is the .eot file is working and the .ttf file is not working. I have tried several different .ttf files, I have tried using Fontsquirrel generator for each to no avail. I am at my wits end on this having spent days on it. Do you have any ideas.

Thanks so much.
206.flag stk Comment
10/06/11
Roxanna - I think tip 6.2 might apply here. (i.e., make a folder off your root directory called fonts and specify "/fonts/beatty.ttf", rather than "../fonts/beatty.ttf") Hope this helps.
207.flag Roxanna Comment
10/07/11
It still did not work. The site is macys.roxannabrock.com.

If you are on a pc, see the fonts in the navigation are trebuchet ms instead of beatty. The page heading (welcome...) in red is the commersial font- it works.
208.flag stk Comment
10/07/11
Roxanna,

I had a closer look at your page and note that the @font-face statement loads the Beatty font as:

@font-face {
font-family: 'BeattyRegular';



But that the font-family statement that calls it is:

#navbar a {
font-family: Beatty Regular, Beatty, Trebuchet MS, Verdana;



Firstly, any font families with a space should be wrapped in quotes (i.e., "Beatty Regular"). More importantly, the font loaded doesn't have a space. (i.e., remove the space in the font-family declaration - "Beatty Regular" to "BeattyRegular" - and this should fix your problem).

Also, whenever you define a font stack, it's always good practice to end with a generic font family (either 'serif', 'sans-serif', 'cursive', 'fantasy' or 'monospace'). [source]

Hope this helps.
209.flag Roxanna Comment
10/07/11
I can't believe I made that mistake. I am so sorry for taking up your time. I have been having some personal issues lately and I suppose it has shown up in my design. Thank you sooo much for your help and all the information you provide on your site!
210.flag sarah Comment
10/17/11
I'm using google font Tangerine but it doesn't work in IE. Is there any solution for this?
211.flag Pim Comment
10/17/11
Very good article. This answered a lot of my questions.
However, I still have one question left: What is the purpose of "local(..)"? I don't understand why we need it.

For example, this:

@font-face {font-family:'URW Chancery L'; local('URW Chancery L'); src('chancery.ttf') format('truetype'; }
...
style="font-family:'URW Chancery L';"


can be rewritten as

@font-face {font-family:'myfont'; src('chancery.ttf') format('truetype'; }
...
style="font-family:'URW Chancery L', 'myfont';"


which looks more simple and straightforward to me. And the browser doesn't even need to access the @font-face clause at all if the font is installed locally.
So what is the use of local(..)? Am I missing something?
212.flag stk Comment
10/17/11
Pim - You must have missed this explanation in the text?

Though you can name use any font name, use the real one (capitalization matters) for the "local" declaration. This will give non-IE browsers an opportunity to look for the font on your visitor's computer. If it's loaded, it'll saves a TTF download. (Note: The local declaration is required, because it confuses Internet Explorer, which will fall back to the EOT file without trying to download the TTF).



While these arguments for using 'local' remain true, there are two things to note:

1) It remains possible - albeit unlikely - that the 'local' font you specify isn't the font you are intending for use. (Anyone can name a font what they want and 'YourFont.ttf' *might really be* 'SomeOtherFont' ... named as 'YourFont').

2) Ethan Dunham, author of FontSquirrel & FontSpring, came up with a new @font-face syntax in February of this year. You will like it. The new method obviates the use of 'local' and relies on another trick to target browsers. The syntax looks like this:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 (IE7/8 Compatible Modes) */
  src: url('webfont.eot?#someText') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.ttf') format('truetype'); /* Modern Browsers */
}


The way it works: IE(6-8) reads everything in the 'src' contained within the parenthesis. Declare the EOT first and append a question mark. IE thinks everything after the question mark is a query string and loads only the 'myfont.eot' file. Other browsers follow the spec and select the format they need based on the src cascade and the format hint (Ethan's hardened syntax includes both WOFF and SVG formats, which I've omitted here ... there is a hash tag '#' immediately after the EOT question mark, which is necessary for "edge cases" ... in other words - leave it in!)

Another benefit that Ethan doesn't mention is that his method avoids possible conflicts with 'local' font designations (mind you, in doing so, it also puts more load on the web server, because even if the right font is loaded locally, it will still download the font from the web server. Guess you can't have everything, eh?)

Hope this helps. (Note to self: update this article with this newer, superior, succinct code).
213.flag Pim Comment
10/18/11
I understand that; I may not have expressed myself clearly enough. Also I see I messed up the syntax in the examples, so it looks like I don't know how it works. Sorry.

But I still have the question. What is the difference between using local(real font name) in the @font-face clause and using the real font name in the font-family property?

I know you can use local to confuse IE into thinking the src is not valid and to prevent it from loading a file it can't use, but I'm pretty sure that was not the original intention!
214.flag stk Comment
10/26/11
Pim - I believe the answer is that there is no difference between them, although there *may* be a difference in how the @font-face font is both deployed and handled. One would have to test to check on this.

The intent of a local() option was to save server bandwidth, by providing an opportunity to use the local font, rather than than downloading the font(s) specified.

I can think of three possible cases:

a) @font-face defines font-family with a made-up name, has a local() setting that uses the font's real name. Generally, any elements you'd want to have in that font type would be { font-family: "made-up name",sans-serif; } (downloads font, unless a "real name" font is loaded locally ... note: I say "a 'real name' font" and not "the 'real name' font" because it's possible that the font loaded locally isn't the font you're expecting it to be.)

b) @font-face defines font-family using the font's real name and has a local() setting that also uses the font's real name. Then, elements in that font-type would have { font-family: "font's real-name", sans-serif; } ... which, I assume, would be handled similarly (loads font if that font isn't loaded locally).

c) (I've never thought about this before, but it's what I *think* you're driving at ...) @font-face defines font-family as a "made-up name" and no local() is defined. Then, in the CSS, one defines font-family as being: { font-family: "real font name", "made-up name", sans-serif; } ... what happens? I don't know. I would suspect an unhappy answer ... i.e., "real font name" font is probably pulled locally (if the user has it), but that user *may* still download (and not use) the "made-up name" font? - because there's no "local()" defined in the @font-face syntax. (One would have to test this scenario to verify this hypothesis).

Not something I would do or run into. Whenever I specify @font-face, I generally don't specify "local" and chose a "made-up name" for my font-family declaration in @font-face. When I want to use the font, I then use only two fonts in my font stack: "made-up name" and a generic fallback (serif, sans-serif, monospace, fantasy or ... whatever the last one is ... cursive?.

Does this help (or even address your question)?

215.flag Gabi Comment
01/03/12
THANKS! You saved my life!! :D
216.flag Mike Comment
01/10/12
Thank you, this is fantastic :)
217.flag Helen Comment
02/09/12
Thanks so much for this great tutorial article. Very very useful :)

I have a question though. I have embedded a fancy font following this tutorial and I have added also verdana, or helvetica as second font. Now, my fancy font has smaller size to begin with, so I had to increase the font-size.

But the second font gets way bigger than my fancy font, if the fancy font doesn't work.
Is there a way to declare two different font sizes for these, one large size for the fancy font and one smaller if the fancy font doesn't work?
218.flag Scare Bears Comment
02/11/12
God article.

In the process of making my site now looking forward to playing with this ;)

Also wanted to know about WOFF.
219.flag stk Comment
02/12/12
Helen - Thanks for asking this valuable question. Yes, font sizes are a problem. There is a CSS3 solution "font-size-adjust", but this is hardly x-browser.

Firstly, your @font-face font really doesn't require a back-up font (it either downloads, or it doesn't). For me, I just use ONE generic font after my downloaded font, to keep things simple.

Secondly, because the "font-height-adjust" doesn't work, it MAY be worthwhile to adjust the x-height of the "fancy font" using a program like Fontforge.

I'm really sorry there isn't an easier solution, but you've definitely hit on a a (growing) problem!

Scare Bear - Not a WOFF expert. It's the "way of the future" for online fonts. Not sure what browsers support it ATM. I would include it for "future-proofness", but I encourage you to research this yourself.)
220.flag Shankar Comment
02/15/12
I have followed your css, it is working fine in Crome, FF, IE9, IE6 but not working in IE7 & IE8.
221.flag stk Comment
02/19/12
Shankar - I have sorted out your issue with IE7/8 ... those versions of Internet Exploder don't like spammers! (LOL ... nice try India) ;)
222.flag Mark Comment
03/30/12
Visually Chrome, Firefox & IE 8 all display correctly...

Chrome will print the correctly

Firefox will print but doesn't show font

IE 8 will print blank page only
223.flag stk Comment
04/06/12
Mark - FWIW, my version of FFx (PCv11) shows the font? -stk
224.flag Pallavi Comment
05/23/12
Hey, Thanks nice article. Very helpful. Before using @font-face, I was trying to use Google web fonts. It was working fine in all browsers, but on Acer laptops - the font effect wasn't effective on all IE versions. Any thought?
225.flag stk Comment
05/23/12
Pallavi - Well, first off, I wouldn't rely on a 3rd-party server - especially not to inject 7 lines of code:

@font-face {
font-family: 'Arapey';
font-style: normal;
font-weight: 400;
src: local('Arapey Regular'), local('Arapey-Regular'), url('http://themes.googleusercontent.com/static/fonts/arapey/v2/hTZBMDBEmuM7E6AJpWkyGA.woff') format('woff');
}


I would download a TTF version of the font file and use the Font Squirrel generator to make the variants I want (TTF, EOT, WOFF &/or SVG). Then I'd upload them to my production server, add the necessary @font-face code to the top of my CSS file and BOOM ... I'd be done.
226.flag Srini Comment
05/28/12
http://ttf2eot.com can be used as well to convert the ttf fonts to eot fonts.
227.flag James Comment
06/09/12
Thanks... Been putting this off since 2009 I guess...
228.flag Mat Comment
06/10/12
Thanks, been looking for some good advice on this for a while and this covers it in great detail. Good Work! I will be using this in most of my web design projects down the line.
229.flag Sean Comment
06/19/12
Thanks dude! Totally made my day!!
230.flag Alex Comment
08/07/12
The excitement builds as I design my website-- sweet. The font squirrel generator sounds like a life-saver-- and I dont mean the candies!

Sorry, had to say it. But seriously, this is great. Who wants their website displayed in Times New Roman anyway?
231.flag Rüya Tabirleri Comment
09/03/12
Again font doesn't seem as beautiful in chrome.
232.flag Pete Comment
10/16/12
The'basic' version was working a treat in chrome, but when I added the IE' fix', it broke the page in chrome. Any ideas?
233.flag Tav Comment
11/15/12
Awesome article, very detailed and I was able to test this out in several browsers. Thanks for the useful tool and tip!
234.flag Mustafa Comment
11/18/12
Well done & thanks.

A web designer.
235.flag Top5buzz Comment
05/19/13
This Post Saved My Life :)
Thanks a lot man !! ;)
236.flag Farzad Comment
09/03/13
Oh! Thank you so much for a such wonderful writing. It really helped me shaping my new corporate web site.