Go beyond web-safe fonts and give a facelift to your site’s typography by using font-replacement techniques. In this post, we take a look at the 6 most popular methods to add any fonts to your web pages.
Fahrner Image Replacement (FIR)
Fahrner Image Replacement (FIR) is a technique that uses CSS’s background-image attribute to replace text on web pages. By hiding the actual text using display: none or visibility: hidden, and overlaying an image, you can use any custom fonts in your headings without comprising any accessibility concerns of screenreaders. While this technique is SEO friendly, the downside is that it will require a lot of CSS coding along with custom images if you have much text to replace. A modern implementation of FIR involves the use of CSS3’s content and require-font function for image replacement.
Facelift Image Replacement (FLIR)
Scalable Inman Flash Replacement (sIFR)
Cufon Font Replacement
CSS3’s @font-face attribute allows designers to specify a link to a custom font which will in turn be downloaded and installed by the browser when the page is rendered. The problem, however is that different browsers support different font formats – Internet explorer requires .eot, Firefox and Safari support .otf and .ttf while Opera and Chrome require .svg. If you want a truly cross-browser font support, you will need to convert your fonts into several formats.
Google WebFont API
Google WebFont API uses CSS3’s @font-face to add web fonts to your site. Currently limited only 18 different font-families, Google WebFont API provides by far the easiest implementation for custom typography. All you need to do is simply hotlink to their stylesheet link and then call the font in a CSS style. The major advantage is that by using StyleSheet served from Google’s CDN, you can save a lot of bandwidth and improve your page load speed.