Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

search cloudRandom Searches
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: 884246 views
237 Comments · GuestBook
default pin-it button
Updated: 12-Jul-2011
Web View Count: 884246 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

An unexpected error has occured!

If this error persits, please report it to the administrator.

Go back to home page

Additional information about this error:

MySQL error!

MySQL server has gone away(Errno=2006)

Your query:

      SELECT pset_plug_ID, pset_name, pset_value
      
FROM evo_pluginsettings
WHERE pset_plug_ID = "56"

An unexpected error has occured!

If this error persits, please report it to the administrator.

Go back to home page

Additional information about this error:

MySQL error!

MySQL server has gone away(Errno=2006)

Your query: Session::dbsave()

UPDATE evo_sessions SET
        sess_data = 'a:1:{s:6:\"search\";a:2:{i:0;N;i:1;s:0:\"\";}}',
        sess_ipaddress = "54.87.83.160",
        sess_key = 'cAyfbYi6KDeGHd5srv3EDPyC9R8dLqgX',
        sess_lastseen = "2015-05-27 23:49:25",
        sess_user_ID = NULL
      
WHERE sess_ID = 19932280