Fonts on Web Page

Primary tabs

8 posts / 0 new
Last post
Janic's picture
Offline
Joined: 14 Apr 2008 - 5:09am
Fonts on Web Page
0

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

Raymond Kingston's picture
Joined: 4 Sep 2006 - 12:28am
0

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.

Raymond Kingston's picture
Joined: 4 Sep 2006 - 12:28am
0

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...

Aaron Bell's picture
Offline
Joined: 8 Apr 2009 - 3:50pm
0

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.

Nina Stössinger's picture
Joined: 19 Jun 2006 - 3:01pm
0

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

Aaron Bell's picture
Offline
Joined: 8 Apr 2009 - 3:50pm
0

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!

Carl Crossgrove's picture
Offline
Joined: 8 Sep 2003 - 2:07pm
0

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.

Nina Stössinger's picture
Joined: 19 Jun 2006 - 3:01pm
0

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/