With CSS3 support coming to all browsers, the newest web service to hit the internet is font embedding. Sites like TypeKit, FontSpring, WebINK, and even Google allow you to embed custom fonts into your website with just a few lines of code.
THE HISTORY OF WEB FONTS
The ability to add custom fonts to websites was added to the CSS2 spec in 1998, however it was not implement and consequently dropped in CSS2.1. One browser did choose to implement its own version of web fonts using the .EOT file format: Internet Explorer. Since version 4, IE has supported custom web fonts. In CSS3, the embeddable font spec was renewed, supporting either .TTF or .OTF font files. After concerns about licensing, the .WOFF format was also added, and any browser supporting CSS3 supports these standards, including IE9.
EMBEDDING FONTS
Because of the two different supported standards, embedding fonts is tricky. It involves checking if the font exists on a user’s machine, and if it is not found, downloading the appropriate font file to the user’s machine. This is a complicated and hard to test process due to all the variables involved, including browser support, font files and naming, and font variations. However, font embedding services allow you to bypass the hassle and embed fonts without the headache.
Using Google’s service as an example (because it’s free), the first step is finding a font to use for your project. For sake of example, we will use Raleway.
The second step is to include the CSS or javascript file which will download the file to the user’s machine. In Google’s case, it is a simple stylesheet link.
Google also allows you to combine multiple font styles and weights into a single request, but for ease we will use just one.
The third step is to decide where you want to implement the font. For example, if you want to use Raleway as a heading, you might write the following in your stylesheet:
h1 { font-family: ‘Raleway’, verdana, arial, serif; }
That’s it! Font embedding services are a great way to enhance your web development and design in a quick, easy, and usually free way.
CONSIDERATIONS
There are some important considerations here. First, you should find a similar font (if possible) to use as a back up in case your first font has chosen. In this case I have chosen Verdana because it is a tall font, as is Raleway. Remember to test your site without the embeddable font to make sure it displays correctly without your custom font. Also, make sure to check the file size for each font, as any user without the font will be required to download the font before they can see it, which can increase load time or sometimes flash the font when it downloads. Lastly, limit your use of different font styles to a couple of choices, because each one adds to file size when downloaded from Google.
