Custom fonts online... again?

December 19, 2008 7:29 AM

What're the best practices these days for including custom fonts in web design?

Last time I looked into it, around a year and a half ago, sIFR was big, but I don't like the hit to usability (no right clicking, no highlighting regular and replaced text together, etc.). I know newer browsers support CSS embedding, but I don't believe that they have a significant market share yet. I'm guessing that, since I still don't see a range of nonstandard fonts on the web, there's still no perfect solution. Any other imperfect solutions I should know about, though?

This is all on a whim, understand — I'm only dealing with a personal website and a few nice, free fonts are my candidates. I'm only thinking of doing headers and page titles. If the state of the art hasn't advanced much, that's fine; I just thought I'd check in.

(To preempt any sidetrack, the free fonts I mentioned above are licensed for web display — I just checked.)

posted by electric_counterpoint to Computers & Internet (9 answers total)

I am pretty sure you encapsulated the current quandary quite nicely.

sIFR has seen some updates, but I think many/most of the restrictions you named are still in place.
posted by cjorgensen at 7:57 AM on December 19, 2008

I just read this article on Fonts and the Web.
posted by rdurbin at 8:01 AM on December 19, 2008

http://www.fontburner.com/

http://facelift.mawhorter.net/quick-start/
posted by deern the headlice at 8:04 AM on December 19, 2008

The article that rdurbin linked to above suggests only applying these techniques to non-body text which seems like a reasonable example of "best practice" to me.

It seems like a lot of the criticisms relating to hits on loading, accessibility, computability or ease of site upkeep that made this a no-no in the past have now been overcome. I guess the ultimate check is still "Is the aesthetic payback I get from using this non-standard font sufficient to justify the downsides?"
posted by rongorongo at 8:29 AM on December 19, 2008

typeface.js is relatively new. That means low on features, but worth watching.
posted by kpmcguire at 8:37 AM on December 19, 2008

This recent post on the blue discussed sIFR and best practices thereof - which, to many people, it seemed, is "don't".
posted by niles at 10:06 AM on December 19, 2008

There's really no best practice in this realm; it's all compromise of one sort or another. sIFR still has all of the drawbacks that it did when you investigated earlier.

Any other imperfect solutions I should know about, though?

I personally prefer Facelift since I can configure it without messing with Flash, but it does not create selectable text.

@font-face is unfortunately so imperfect that virtually no browsers support it.
posted by camcgee at 11:57 AM on December 19, 2008

Best answer: Webfonts.info is a major wiki on the subject. There are innumerable discussions at Typophile (with apologies, they’re so hard to find and link to I’m just going to have to suggest you Google).

Bert Bos wrote a summary of a recent W3C conference on Webfonts.

I don’t think your usability complaints about sIFR are really serious dealbreaker issues. They seem to be edge cases, particularly for the intended case of using sIFR solely for display type.
posted by joeclark at 12:05 PM on December 19, 2008

If you want to be able to dynamically create images for your headers etc as you go along then it can be easily done in php. Here is a script I have used:
http://pastebin.com/f7375b118
posted by Iteki at 1:34 PM on December 19, 2008