Currently there are a few cross-platform compatible fonts that designers can use with the certainty that users have them installed on their system.

Over the years, several alternatives have appeared to let designers add specific fonts to their pages; for example, techniques such as sIFR and Cufón rely on methods that work well in certain situations. These techniques only represent a temporary solution.

The growth of HTML5 and CSS3 have led to the expansion and need for more innovative and thorough website designs. With rapid advancement in web development options, it is time for web typography and font selection to keep pace. Font replacement methods can be an integral element in a designer’s arsenal to fully achieve the desired look and feel of their website.

CSS3 uses a technique called @font-face supported by designers and by the companies that make and license fonts. @font-face lets you embed fonts within a page by declaring the font you want and placing this font on your web server. When a user visits your site, the browser renders the page using this font where specified. This technique is an excellent solution to the problem of uninstalled fonts, but there are complications that require some work. The following sections explain the complications and their solutions.

@font-face Explained

The initial CSS syntax for @font-face is straightforward. HTML tags currently inherit the font-family properties that are assigned to them in the designers HTML document and CSS style sheet.

@Font-face in a CSS Style sheet looks like this:

@font-face {
font-family: Sigmar;
}

The Problem—Different Types of Fonts

• IE versions 5.0-8.0 of IE support the OpenType font.
• IE 9.0 supports OpenType with a few qualifications.
• Mobile devices, such as iPod and iPad, do not support OpenType at all, but a format named SVG.

If you want to display the Sigma font on as many browsers as possible, you need another method to display the font.

@font-face {
font-family: Sigmar, Georgia, Palatino, Times New Roman, serif;
}

Sigmar is first in the list, but you need to provide alternative fonts in case the user’s browser cannot render Sigmar which is an OpenType font. In this case, Georgia is the first alternative that will show up in browsers if they cannot read Sigmar.

More About Browsers and Font Types

The following table lists the various levels of support for the different font-types:

OpenType (OTF): a widespread font format heavily supported by the industry and developed as collaboration between Adobe and Microsoft; one of its primary advantages is cross-platform support. Other typesetting features, such as glyph support, make OpenType fonts the primary font choice for professional font designers.

TrueType (TTF): originally developed by Apple computer and later adopted by Microsoft, TrueType fonts are widely used because they are cross-platform compatible and offer sophisticated typesetting controls, such as hinting, a technique that improves the quality of the font in low resolution screens.

SVG: a vector-based format currently supported only by Apple’s iOS for iPod and iPod devices. SVG fonts are text documents that define the font outlines as vector objects within the Scalable Vector Graphic language (SVG).

Web Open Font Format (WOFF): the latest addition to web fonts that can potentially become a standard since it is in the final stages of approval by the World Wide Web Consortium (W3C). WOFF includes the ability to heavily compress font files and optimize them for distribution over an Internet connection.

Embedded OpenType (EOT): a variation on OpenType created by Microsoft and largely supported by Internet Explorer. EOT has several copy protection features built in to prevent copying of fonts.

The Solution? Using a web service to generate multiple fonts.

The @font-face technique requires you to declare multiple font alternatives for maximum compatibility; for example, you need to declare OpenType fonts, Embedded Open Type for Internet Explorer, and SVG for the iOS. If you fail to declare multiple fonts, your website will not be able to be viewed on all browsers. There are web services available that allow you access to fonts in all of the different font types.

Font Squirrel

Font Squirrel is a popular web service that provides web designers’access to hundreds of fonts. Font Squirrel was created in 2009 and is still active today. New fonts are constantly being added to the website. All the fonts on Font Squirrel are Commercial Free and can be used with the @font-face property. This means that designers do not need to worry about misreading a web font license or picking a font not compatible with @font-face.

The strengths of Font Squirrel.

• You do not need to download multiple kits unless you want to because font Squirrel provides several kits that include different font types you can add to your site.A standard kit provided by Font Squirrel includes multiple versions of a font, such as TrueType, EOT, WOFF, SVG, and Cufón.
• Every font and font kit provides information on what platforms the font can be used (commercial Desktop Use,@font-face Embedding, Ebooks and PDFs, Applications.)
• Inserting the fonts into your HTML is easy because font kits come with generated CSS, so you can copy and paste into your own CSS.
• If necessary, you can generate your own kits using the site’s @font-face generator. The generator will not allow fonts that are not commercial free to be downloaded.
• Current fonts are sorted into 18 tags and 18 classifications. This makes it easy to locate the font that you want.

The cons of Font Squirrel.

There are a few other issues that may make user use complicated.

• Users must get your own distribution license to use the fonts acquired in templates or themes.
• Font Squirrel shows some fonts that they cannot legally redistribute, although interested users can download those fonts on the font designer’s website.
• Some fonts have complications in the license that casual users might miss. For example,to legally use the font Alegreya, the user must use the webfont generator to download the font, and then rename the font.
• Although every font provides information on platform compatibility. This information is provided with symbols rather than words. First time users need to go to the FAQ page to have the symbols explained.

Typekit

The Typekit web service has several licensed web fonts available for use from well-known type manufacturers, such as Adobe, Bitstream, Chank, FontFont, and others. Typekitunlike Font Squirrel is not a free service. Interested designers will have to pay a yearly fee for the use of the fonts.

The Strengths of Typekit.

• Multiple payment plans are available to cater to the font needs of various types of people. Higher payment plans give users access to more fonts and the ability to use the font on more websites.
• Users can use some fonts free as long as they include a badge on their website.
• Typekit gives customers access to thousands of fonts.
• Typekit offers a 30 day free trial, so you’ll be able to test out the service before committing to paying the monthly fee.

There are a few other issues that may make user use complicated.

• Yearly fee or necessary badge. Payment for fonts is not necessarily a bad thing because this system gives all of the budding designers out there payment for creating new fonts, but it can be an unwanted expense to casual website builders.
• All fonts are hosted on Typekit servers, so you need to add references to your chosen fonts in your CSS stylesheets.

Google Font API

Google has a similar system to Typekit called the Google Font API. Like Typekit, all the fonts are hosted on the Google servers. Add references to these in your style sheet, and then use them as needed. Unlike Typekit, these fonts are currently free to use and there are several options in different styles.

The Strengths of Google Font API.

• Like Font Squirrel Google Font API offers fonts that can be used free for any non-commercial or commercial purpose. The license allows the user to customize the fonts to their own use.
• Google provides a guide for new user that explains how to add the fonts to a website. This strength is hindered slightly by the fact that the explanation is generic and located on the product page.
• The website currently offers 629 different font families to choose from.
• Users can change the way they view the fonts on the top of the webpage. Users can switch easily between word, sentence, paragraph, and poster views without invasively clicking on every font that they are interested in downloading.

There are a few other issues that may make user use complicated.

• There are only 4 categories and 8 script types to sort all of the fonts. This means that you will need to sort through hundreds of fonts in order to choose your perfect font.
• The Google Font website and webpage layout is not of the same design caliber as Font Squirrel and Typekit. Not a huge problem, but it might be nice to have more than a white screen if you are going to be staring at a webpage for hours sorting through fonts.

Cufón

Cufón is a website that provides a font replacement technique using a font generator and a rendering engine. It uses JavaScript and vector graphics to convert TTF, OTF, and PFB and postscript fonts to SVG. The conversion process also creates a JavaScript file for you to reference in your HTML.

The Strengths of Cufón.

• High browser compatibility. It can be used by most major browser. (For more information see the complications section).
• Users can pick and choose what glyphs you want to be downloaded to your browser. Latin Uppercase, Latin Lowercase, Punctuation, and Numerals are just a few of the options available to users.
• Fonts are included into your websites code with a simple <script> tag.
• Font files are compressed so that they weigh 60 to 80% less than the original file.

There are a few other issues that may make user use complicated.

• The site does not currently work with IE9. Although the web developers claim to be attempting to fix this issue. In the meantime, IE9 users can deal with this issue in a number of ways:
  • Switch to Firefox or Safari when using the site,
  • Roll back to IE8
  • Try one of the other Font Replacement web services available on the web.
• Since the files are text images, the font files can be too heavy to use as your web sites main font. Cufón fonts are best as your title and subtitles.
• The website does not explain what font types can and cannot be used legally for commercial and non-commercial projects. Although it does link to a wiki page with their distribution license. Although the Wikipage isn’t all that in-depth.

Despite the wonder of Font Squirrel, Typekit, GoogleFont API,Cufón and various other web services, they do not fix all the browser problem presented by @Font face. None of the web services provide a font that can be used across all browsers without a fall back font. Instead these web services work within @Fontface by providing multiple fonts that provide both the right aesthetic appeal and font type that the web owner desires. For web designers who have vision, but lack technical skill and knowledge, you might want to consider enrolling in some local or internet based HTML classes that will allow you to fully utilize the HTML and CSS web sources available to us today.