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(''));
	}
);