Welcome!
Fontify Me! is your friendly neighborhood font-embedding tutorial. If you're looking to learn how to spice up your website with better typography, you've come to the right place!
Why embed fonts?
In the earlier days of the web, designers were restricted to web-safe fonts—fonts preinstalled on most computers—to ensure site visitors view the page as the desinger intended. If designers wished to deviate from web-safe fonts, they would have to type up their text in an image-editing program and save it as an image file to replace the text. However, image replacement has several disadvantages:
- Loss in quality: Type is rasterized when it is saved as an image; if the viewer manually increases or decreases the size of the page, pixelization occurs from scaling the image. Pixelization is also magnified with low screen resolutions.
- Loss in meaning: Hierarchy cannot be placed on an image, and search engines cannot derive words and content from an image.
- Loss in accessibility: Screen readers will not be able to read anything off an image beyond the alt tag description, which is especially problematic with large blocks of text.
To the rescue
With the advent of font embedding, people can now use fonts aside from the typical Arial, Verdana, and Times New Roman without fear of the aforementioned problems with image replacement while being rest assured that others will be able to view their webpages correctly, even if they don't have the right fonts installed. With that said, be mindful that the more fonts you embed, the more time it takes for your page to load, so embed wisely!
In this tutorial, we will cover CSS-only techniques to embed fonts. If you're itching to learn more, though, fret not! There are links provided that will guide you through alternative methods, as well as general resources for your font needs.