Tag Archives: Web Design

Embed Fonts in Websites

Here’s an easy and effective way to add some excitement to a website, embed some custom fonts, so they can be displayed in the browser even if they are not installed on the visitor’s computer. There are 2 ways to do this; use a Web Font Embedding Service (see http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/ ), or manually add them using the CSS3 @font-face rule. I will explain how to do the second option.

First find a font that is not restricted by copyrights, and legal to use and embed on your website. I like http://www.dafont.com/ , it has many free open source fonts, and you may make a donation to the designer. Firefox, Chrome, Safari, and Opera support fonts of type .ttf (True Type Fonts) and .otf (OpenType Fonts), so start with one of these formats. Try to use a fairly efficient font, like less than 200kb.

Microsoft Internet Explorer is still the most widely used browser on the Web (39%), and it does not support .ttf nor .otf for @font-face embedding, it requires .eot (Embedded OpenType). Fortunately, there are easy ways to create them. A simple converter can be found at http://www.kirsle.net/wizards/ttf2eot.cgi . It only converts .ttf, and has no options. Another more versatile option is http://www.fontsquirrel.com/tools/webfont-generator . It can convert .ttf and .otf, and has several options to customize the output files for advanced users. There are other converter sites, I’ve used these 2, they’re fast and easy to use.

Once you have your font formats, upload them to your server. Then you need to use the @font-face rule in the CSS;

font-family: Font1; /* any name you like */
src: url(‘Font1.ttf’),
url(‘Font1.eot’) format(“opentype”); /* IE */

[Of course src needs to point to the correct location of the font files.]

Then you could create a class to reference the font in many places;
.font1{font-family: Font1;}

The only thing left to do is design with the font by specifying the class;

<div class=”font1″>My embedded font!</div>

That’s it, easy huh?