Paul Irish

Rad post/reference! Thanks for putting this together, Paul!!

Excellent, thank you!

I didn't know about the smileyface. Thanks :)

You may already know this? if not you you might want to test and add my recent font-face discovery:

I noticed that in IE 7+ you get can get better font aliasing of @font-face typefaces sometimes by disabling clear type (depends on the font, its size and its weight I think). From what I understand the simplest way to do that is to apply a filter to the body element like so:

body {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}

This is applying a pretty much non-noticeable opacity but doing so disabled the browser clear-type and reverting the default OS aliasing (not sure why they are different but they are)

If for some reason you want the clear-type back on individual elements simple add filter:none; for example:

h1.foo { filter: none; }

I'm not sure of performance issues with this, I imagine if you have heavy JS going on it could be impacted. I'd also recommend putting in a conditional stylesheet.

awesome stuff, thanks for this. Read into it again last week, mainly Snook's awesome post on it. I wasted too much time messing with fonts instead of getting backend stuff done. ah well! :D

Very detailed research, as always.

On a side note: your site lags on Linux+Firefox because of the huge background canvas drawing. Scrolling is often painful.

I'm doing a lot with @font-face now, and your posts have been a great reference. Thanks!

Great roundup as usual Paul. I've definitely been running into the "A" blocks in Chrome on sites not using the bulletproof smiley syntax.

I'm also starting to wonder how we're going to navigate things when IE ships support for WOFF. How will we make sure that IE loads the WOFF and not the EOT? Will it matter? In any case, it'll be a good problem to have to solve. Here's hoping it actually happens in IE9…

Nice list, thanks.

I miss one 'gotcha': Although IE6 is not that important anymore, it has some serious issues with @font-face when the security is set high. The IE6-user will see a security warning popup on every page on the website.

Hey Paul. Great post. Don't know how you keep track of it all.
Glad you finally came around to the "unlikely fontname" solution with smiley face.
I knew it was just a matter of time. :-)

Rich

>I still think the duplicate name thing is super edge case, but the font
>management woes were just too significant. Mo' Bulletproofer ftw.
Bottom line: except as a hack for preventing unnecessary http requests by IE, the local() descriptor isn't very useful because, in the absence of a unique font identifier, the only thing you can absolutely trust is what's on your web server. All these bugs crawl out of the same crack.

Want to have some fun? Take an odd-looking font and rename it "inherit". Then install it. After that, it will just be a matter of time before it pops up on one web page or another as you browse.
User agents have not been careful about distinguishing between the fallback font-family names that are keywords and therefore must not be in quotations, and fonts named "serif, sans-serif, cursive" etc. that must be because their names match a keyword font-family.
Oops!

love the smiley; I'm using on my blog. FYI – possibly the best open type on the web for @font-face : http://www.theleagueofmoveabletype.com/

Hi Paul,

I’ve used the Font Squirrel generator today (with the default settings) and implemented it in my website:
http://preview5.mcw.nl/

At first it seems to work fine. Firefox renders the text as it should. Internet Explorer sometimes renders the text correctly but sometimes it doesn’t. After a refresh in IE the text is rendered as it should. Can you indicate if this is a known problem, if I’m doing something wrong or maybe point out the problem and a possible workaround?

Thanks for your reply.

Martijn van Mechelen

Something important I just found after hours of slaving that is really important:

@font-face declarations do not work in Firefox or IE when they are wrapped in a @media declaration. They do however work in webkit based browsers.

I spent hours trying to figure this out and finally found a thread on Stack Overflow where someone discovered this. Moving the @font-face declaration out of the @media section seems to work just fine. I hope this makes the list, it would have saved me and I'm sure countless others headaches.

@Paul Irish
I will get on that, thanks for the mention by the way!

Getting each browser AND its "font system" to all work together nicely? I don't want to even think about it since fonts always seem to be the "doesn't work so well cross platform even though we've had twenty years of this". Took me a bit to find since it looks like the OSX Chromium nightlies still suffer from this.

Amazing resource and very concisely presented.

Thanks

@Paul Irish
Just wanted to do a follow-up on the bugzilla report I filed for the font-face in a media query failure in Firefox ( https://bugzilla.mozilla.org/show_bug.cgi?id=567573 ). It seems that the use of at-rules inside a @media rules are invalid in CSS2.1 which is why Firefox ignores it. It seems to me and some of the other posters on the bug that this is a good idea so it may be changed in the future. Here is where it says on w3.org that is invalid: http://www.w3.org/TR/CSS21/media.html#at-media-rule . Anyway, there you have it. We will have to see if the developers decide to change how this is handled.

Be advised that the bulletproof and bulletproof smiley methods you propose here do not work on Android phones! My User-Agent is "Mozilla/5.0 (Linux; U; Android 1.6; en-us; T-Mobile myTouch 3G Build/DMD64) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1".

Android does support @font-face and the double declaration method works fine. It appears to be choking on the local() line, ignoring everything after local.

@Martijn
I'm having the exact same problem at work. Could it be some IIS setting?
Maybe a missing mime type or cache-header setting that is messing up IE?

As Martijn noticed, if you refresh the page, the font renders correct…

@Lesley

At work the problem seems related to a frameset. Anyone any ideas?

"If a @font-face declaration is within a media query @media screen { …, it will fail in Firefox. (Thx Ben Kulbertis) http://bugzil.la/567573"

Thank you so much! Four hours of pulling hair and search the Net before finding this. Problem solved!

NOTE: This page bookmarked has been bookmarked for future frustation solving.

might be a dumb question but how do i type the smiley face in a text editor?

hi paul, great blog!

I am experiencing a delay when implementing @font face. Is this normal? Am I doing anything wrong?

Couple of issues I've ran into with SVG on the iPhone recently:

SVG fonts don't work with a cache manifest. Due to the manifest treating # as comments and Mobile Safari requiring the font ID reference in the URL.
In my tests using text-overflow: ellipsis; turned the contents into only "…" and nothing else.

Regarding Paul's question of leaving off the hash in the manifest but using it in the CSS: That makes logical sense but attempting it still fails. I don't think it fails because the hash is interpreted as a comment (the spec is really clear that a comment must appear on its own line), but – alas – the bug *is* real.

I came eventually to this treasure-trove of information while trying to get @font-face working in Firefox 3.6.6 on OS X.

I generated a font-face kit for Diavlo using Font Squirrel. Tossing the file demo.html at Firefox fails to render the font; I did notice after the fact that you mention that Firefox doesn't do right when using file:// . So I put the Squirrel's kit at the docroot of the local Apache server — still no Diavlo, just the default font.

Your test file http://dl.dropbox.com/u/39519/webfontsdemo/index.html also fails in Firefox. The default font is used in every test case.

Any idea what could be going on? I tried disabling all Firefox plugins in case something was interfering; no change.

Just wanted to confirm Tristan's "text-overflow:ellipsis" find as well. It really does truncate the entire string to ellipsis. Reverting to a non-SVG font fixes it.

Tristan, Paul: Have you filed a bug at Apple regarding these SVG font problems?

Been testing on an HTC Desire (Android 2.1). As suggested earlier, 'local' stops it loading anything. Without local it'll load the ttf, but doesn't use it (tried base64 also).

Couldn't get android to eat the SVG file either.

In IE6-8, using createStyleSheet and then setting styleElem.styleSheet.cssText to a text value that includes a @font-face declaration going into will crash IE6-8.

John, I'm wondering if you know of any workaround for this, or is it just impossible to dynamically insert @font-face declarations in IE6-8? Thanks in advance!

Adding this to my gedit snippets, thanks!

Can anybody tell me how to integrate differenet fonts in the website which will work, if the sytem donot have th eparticular font type.

@Dave Myron Thanks for the confirmation. I have not filed bugs yet.

Also worth noting that users who are on Win XP will not get anti-aliasing in IE6 or any version of FF. It's a pain. My best solution is to detect the OS version, and use Cufón (when allowed by the font) for those users, and use font-face for the rest.

We use a program called tealeaf at my workplace to track user interaction and see the problems clients are having in order to fix them more easily. We wanted to test an embedded font using @font-face so I implemented the bulletproof syntax with the smiley. Everything worked great and it went into production. In tealeaf, you can see a record of "viewable pages" that the user has visited during their session. We started noticing a number of IE7 users with the non-ie font files loading as "viewable pages." We aren't really sure if the user is impacted in any way by this or if the files are actually downloading to the user. Ever heard or seen anything like this?

@Dave Myron
I have a working proof of the svg files not behaving properly in the cache manifest. If you include the font name normally you will have it be downloaded, but @fontface is still looking for the url:'fontfilename#fontid' so it fails.

if someone knows of a way to get the font file to download and then the identifier be added afterwards within the @fontface statement, that may work.

http://straathof.acadnet.ca/pinch/

This is for an opensource publishing engine, and I need a solution… http://straathof.acadnet.ca/beta2.5.5/

Everyone commenting here is a Genius! Thank you all for your tremendously helpful knowledge.
:-)

One week into CSS and full of dumb questions: After much experimentation, I take it that @font-face cannot be used within the property declarations of ID or CLASS statements? [I hope I'm using the terms correctly; feel free to correct].

My objective is to have one or more links on the page in a non-standard font, leaving the other links in the default font.

Thanks for any guidance.

If you really need letter-spacing with a SVG font on iOS (on iPad-Pod'n'Phone) here's a little workaround in jQuery. I have to admit, it's rather ugly … but works.

// call this when running on iOS
$("body *").each(
	function (index, element) {
		if ($(element).text() != $(element).html()) return;
		var ls = parseInt($(element).css("letter-spacing"));
		if (ls==0) return;
		$(element).html($(element).text().split("").join(''));
	}
);

@Martijn
I have experienced the same on one of my sites. Ended up using the META tag for IE8 to render in IE7 mode – which I already dislike very much – and then a conditional line of CSS for IE7 (below the link to the general stylesheet), in which I once again defined the font-family. Somehow IE needed this bit of encouragement… Still looking for a cleaner solution, though.

@Marijn
Thanks for the tip. I'll try it out!

Re the gotcha with remote font files in Firefox:
-my web host does not allow custom Htaccess, so cannot do that

-if I use base64 to embed fonts in CSS, then CSS file becomes huge. Will that not slow down page loading, even after the font is downloaded first time?

-my CSS file is ALSO remote. Tried hosting font local to HTML page with remote CSS. Did not fix it.

Any suggestions. THANKS

@Nick Venturella I've run into the same problem with Android – there is seemingly no way to satisfy both IE and Android without a conditional stylesheet. I'm serving everyone .woff, .ttf, and .svg and then serving IE only an .eot – and I'm not declaring a local src anywhere. This works everywhere I've tried so far (except Camino on OSX 10.4.11, but I think there are only three or four of us left anyway).

Also, just to add to the problems: @font-face will not print with Firefox (3.6.9) or Chrome (6.0.472.55) on Windows 7. So there's that to deal with next, unless anyone has a suggestion…

@Marijn
It seems that when removing the sans-serif fallback font solves the problem. I don't know why this is. Somebody got a clue?

One more caveat we just ran into: browser security settings disallow font downloading. See Conclusions and hover the tooltip "depending on browser settings": http://randsco.com/index.php/2009/07/04/p680

This setting was pushed down at the client's enterprise :(

I'm also having a hard time getting the actual font to print, I can get it to recognize the font size but its not pulling in the actual font style. Any ideas?

cheers
D

@Martijn
Got the same problem. In IE font-face does not work. This issue appears only if you use frameset or iframe. Removing frame solves the issue. Still looking for a solution but can't find any. Removing sans-serif doesn't help in my case.

Thanks a lot, this is a really useful post. Bookmarked :)

Great! Really useful. Thanks!

I can totally verify the cache manifest and svg font issue. Only real way to get embedded fonts in your offline web app is using cufon for the moment.

great post. any info on getting @font-face to perform better when using text-transform: uppercase?

@Keith Dawson
The dropbox test didn't work because of Paul's statement; get the links from above:
"Hosting the fonts on a different domain? Firefox requires some extra effort; you'll need to add the Access-Control-Allow-Origin header, whitelisting the domain you're pulling the asset from. Example .htaccess config here. Alternatively, you can use the base64 encoding in CSS (create it with the fontsquirrel generator) to avoid setting headers. details here"

I have served Diavlo remotely to a Tumblr blog so I know the htaccess approach works.

great article!

I'm currently having issues with @font-face downloaded from fontsquirrel not working in the Ipad and Iphone browser. Any insights?

Patrick Chuprina

@Complainingest:

I can't seem to get the font to show in Android at all. I have a preview here: http://www.werremeyer.com/testing/webfontkit/demo_v02.html

I'm calling two external css files, one for the regular font-face and one via conditionals for IE. Works everywhere but Android.

Any thoughts as to what I'm doing wrong would be greatly appreciated!

Thx!
-Paul

Another gotcha you can add to @font-face with SVG fonts and Opera:

Opera renders each word from the wrong direction.
for example: Paul Irish -> luaP hsirI

@Tom Bigelajzen
Works perfect with TTF fonts btw.

please test various @font face css syntax in less known browsers (midori,konqueror,arora,etc.)…

The post awesome!!! Thanks.

I still have the problem with the SVG font on Ipad and Iphone for some reason it was working for a moment and than stopped. Any ideas what can happen, I re-uploaded the entire website but the font is not the same.

Folks wondering about Android support: the 'local' hack used here for IE triggers an Android bug.

A solution for all browsers (including Android, IE and everything else) is at:

http://stackoverflow.com/questions/3200069/css-fonts-on-android/4520467#4520467

Cross-protocol problem: FF3.6/Windows will not display fonts on HTTP pages if the CSS and fonts were served over HTTPS. Works on Mac. Sorry no FF bug filed yet.

That's a really great post with useful references. Thanks for sharing!

this is a gem of a tip thanks

is it possible to import stylesheets with @font-face? I'm finding that I have to declare them directly on the page that's utilizing them…haven't found any posts that show examples to the contrary

How can I get @font-face to work in FF over SSL? I've tried including the style on the page instead of linking to an external CSS, tried linking to a separate CSS with an absolute path to the font using https://, and nothing seems to work. All fine in Opera, IE, Chrome.

TIA.

I found another gotcha!

When using a font that only contains uppercase glyphs (uncommon, but it happens) using lowercase text obviously falls back to the next best choice. You can fix it with text-transform:uppercase, however when doing so, IE9 *still* renders the characters that *would be* lowercase with the fallback font.

As if IE9 first looks up the glyphs, and then applies the uppercase transform, and doesn't bother to look up the newly uppercased glyphs again.

It's an edge-case, though.
Hopefully I explained it clearly :)

I noticed that 37signals.com uses Typekit for a couple fonts but somehow they serve up Times New Roman on computers that have font smoothing turned off. I can't figure out how they're doing it – there doesn't appear to be any javascript at work there… Does anyone know?

I have a site issue that needs something like that – where the @font-face font is simply skipped if font smoothing isn't enabled. I've tried that canvas hack that was floating around – but that didn't work… it reported font smoothing when there actually wasn't any.

Excellent, thank you!

I was also under the impression that possibly with SP3 it was turned on by default, but maybe!!

Thanks, was having issues with bold not showing on Chrome browser, your tip ref @font-face sorted it out.

Bookmarked this page for future reference for svg fonts. Thanks

Finally figured out the firefox ssl issue. Simply add this to the htaccess file:

Header set Access-Control-Allow-Origin "*"

as found on this site: http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

I didn't know about the smileyface. Thanks :)

Having a Chrome Issue.. we've been noticing, when using font-face (only in chrome) that every 30secs or so the fonts flash. Again, only the fonts we are converting… It's almost like they are being called again. Very strange. Haven't noticed it in any other browser.

@Ryan
I'm having the same Chrome-specific issue: the web fonts I've loaded in using font-face disappear and reload each time a jquery slideshow advances to the next slide. Bizarre…

I'm having a Chrome-specific @font-face issue too:

Typo very edgy in chrome: http://imageshack.us/photo/my-images/534/ihhhhhh.png/

In FF there is no problem: http://imageshack.us/photo/my-images/440/itworkshere.png/

Found a couple more issues with IE7 & Web-Fonts.

Make sure to place the @font-face definitions for italics last in the file. If places before normal style, IE7 will sometimes load the Italics font first and ignore the regular font.

Also, make sure to define letter-spacing, since sometimes IE7 forgets the default value when text is selected.