May 16th, 2010
For years the standard website fonts have been limited to about a dozen common web-safe fonts. Even though a web developer can specify any font to be used in a web site, it will only display properly if the viewer has that particular font loaded on their computer. Because of this, things like company brochures and other print media cannot be simply converted to a web page. Any font can be used in an image, but extensive use of images will slow load time and are not a good SEO solution, as search engines cannot read the text on an image. But solutions are now available such as @font-face, SIFR, FLIR, and Cufón that are changing that. Each has its pros and cons, but these are all exciting steps that give the web designer much more flexibility and give the end user a richer viewing experience. @font-face CSS3 has the @font-face property and although it is not yet supported on all popular browsers, more browsers are implementing it as new browser versions are released. Pros:
- Easy to use
- graceful degradation as older browsers generally ignore the @font-face declaration
- Large selection of fonts to choose from
- SEO friendly
- Fonts may have jagged edges on some browsers or at larger sizes.
- Eula and copyrights are violated unless fonts are licensed permissively. So not any font can be used. See Note on page 4.
- More than one font file format must be uploaded for cross browser support
- Older browsers do not support
- Can increase load time
- there’s been speculation that @font-face could expose users to viruses attached to downloaded fonts