"I wish I could use a particular font on my home page." Have you ever thought about that? Have you ever wondered how that page would be if a custom font was available?
Now you can. And it is quite simple.
Typeface.js is a 24 kb library. With it you can embed custom fonts in your web page without using images or Flash movies. In the past, when someone needed to create a label with a custom font, an image would have been the solution. I used to create small images for specific labels, but - I must admit - it has always been a pain. When doing it, you have to be very careful, in order to make all labels consistent. When the site is multilingual, the time needed to create those labels, increases incredibly. The result? In my opinion, it is almost always inadequate.
Typeface is very useful, but it should be used with care. Don't even think about using custom fonts for the entire body of your page. It is perfect in creating labels, menus, headings and page titles. But that's the only real limitation: using it on big portion of text might really slow down your page.
On the other hand, typeface is free and open source, it is cross platform (support almost all browsers) and it allows basic text manipulation (like line and character spacing).
On top of that, your text will be completely visible to search engines robots. Which is a very important thing!
Is it easy to use? Incredibly. The following snippet is taken from an example on typeface web site:
<html>
<head>
<!-- load any external stylesheets first -->
<link rel="stylesheet" type="text/css" href="/style.css">
<!-- then load the typeface.js library and typeface.js fonts -->
<script src="typeface-0.14.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<!-- go ahead and specify typeface.js fonts with CSS -->
<div class="typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>
</body>
</html>
On the web site, it is possible to download 3 free fonts, but there's the possibility to "convert" your font as well (provided you have the right to use the font).
Hi...your post was exactly what i was looking for. :) thank you!
ReplyDeletei have one question though, what if i want to add some other font not Helvetiker, what changes do i have to make then?
Hi, it's me again. I found what to do with other fonts. :)
ReplyDeleteThank you once again.
Hi Neena, you've been fast in finding the solution! I guess the answer is in the last two lines of the post :-)
ReplyDeleteAnyway, I'm glad you found what you were looking for...
typeface.js lacks the ability to :hover, meaning you can't change the text style on mouseover (such as changing color, etc.). This is a real shame! Other than that, it's perfect.
ReplyDeleteneokio,
ReplyDeleteplease have a look at the following link:
http://www.ambitionlab.com/typeface-js-hover-workaround-2010-04-19