Typophile

Fonts on Web Page

Janic

What is the best way to put a non-standard font in a web page and still have the text live and searchable?
j

Lots. My two faves are sIFR and header span replacement. Others include FLIR and Cufón. There are probably others, but these are the biggies. Span replacement is probably the easiest. Sorry, no time for links, but you can easily find it on Google! Good luck.

Should have mentioned...

There are caveats to each one, some with licensing issues (esp. the forthcoming CSS3 declaration @fontface), some with loadtime, and more. The trend (with good reason) is to replace only headers (for the most part); you know, display type, etc...

As micro says, every method has drawbacks. One of my favorites, typeface.js, has licensing issues and is not selectable, sIFR uses flash and isn't appropriate for body text, fILR just does image replacement dynamically and cufon uses the "canvas" tag, but doesn't result in a searchable text. Of course, there is the classic span replacement (which is what I still use) since it is reliable and works pretty well, but you can't select the text either.

If you're looking for SEO type of thing, most every solution will work since they all leave the text in a form such that, without CSS, they are visible.

So those are the primary methods for getting everyone to see the same font all the time. Now, if you are willing to accept that some people will be able to see the font and others won't, you can use methods like font stacking to provide a better experience to those who have the particular font and a slightly lessened experience for those who don't. Of course, this can be partially overcome by the delicious fontUnstack that came out last week. What fontUnstack does is check to see which font is installed on the computer and then assigns special CSS classes to elements you want to have that font. In this way, you can set up specific CSS style rules for people who have each particular font in the font stack and can maintain an orderly grid despite the inherent differences in the fonts' leading, kerning and scale.

We're at a bit of an interesting time where print design is merging into web design, but issues like web licensing for fonts has not been resolved in any meaningful way (font-face? EOL? subscriptions?). So, if you want to use a non-standard font, your options aren't that great, but they do exist and it really depends on how you want to use the font.

Thanks for pointing out fontUnstack, Aaron.
That looks quite handy! (For the time being.)

Yeah. It isn't a perfect solution as it can end up adding a significant amount of css to your html page, but it is better than accepting defeat!

Adobe's Flex is another method but I have no idea how limited or proprietary it is. This page is an example:

https://xd.adobe.com/#/articles/article/266

Select some text. It's set in Adobe's new proprietary font.

Flex* is a framework essentially based on Flash.
That's an all-Flash page, as far as I can tell.
* http://www.adobe.com/products/flex/overview/

Captured from web.archive.org on 6 Nov 2013. view this capture