Webfonts

For a long time I was sceptical about the use of webfonts. On one hand it is eligable for an author to use specific fonts for publishing his text – but on the other hand you restrict the visitors from choosing the most suitable fonts in their browser settings. Also some fonts are not rendered very readable in every environment.

Meanwhile I changed my mind as you can easily see when viewing my website with a newer browser. The selection of a suitable font which is readable well on different platforms is still important for a good result.

The use of fonts in web browsers

Originally it was not intended to specify fonts in HTML as only the structure (markup) of a document is described, like headings, paragraphs or lists. Netscape Navigator then invented the font element with which you could specify the font to be used for a text section – even though this contradicted the idea of HTML as now structure and layout got mixed.

Cascading stylesheets (CSS) brought the separation of structure and layout. CSS defines the layout of elements in an HTML document. To specificy the font there is the attribute font-family. Here you can either use specific indications like “Arial”, “Helvetica” or “Palatino” or “generic” names: “sans-serif” for a sans-serif font, “serif” for a serif font and “monospace” for a font with fixed with. If none of the specific fonts is available an alternative is selected according to the generic one. The most browsers allow to choose which fonts to be used for the three variants “sans-serif”, “serif” and “fixed width”.

Example – CSS rule to display paragraphs using the font “Arial” or if not available any sans-serif font according to the setting of the browser:

p { font-family:Arial, sans-serif; }

Embedding your own fonts as webfonts

First of all you have to provide the font in suitable formats as for example Embedded OpenType (eot), Web Open Font Format (woff) and TrueType (ttf) which covers all current browsers.

Then you load the font with @font-face and additionally add it in font-family so it gets used, as in the following example for the font “MyNiceFont” which is provided in two formats within the directory /fonts on the web server:

@font-face {
    font-family: MyNiceFont;
    src: url("/fonts/mynicefont.eot") format("embedded-opentype"),
         url("/fonts/mynicefont.woff") format("woff"),
         url("/fonts/mynicefont.ttf") format("truetype");
}

p { font-family:MyNiceFont, Arial, sans-serif; }

Explanation:

The indication font-family within the @font-face definition specifies the name of the font as it can be used. The src indication specifies the source of the font including the format. As you can see in the example, multiple formats are also possible. The browser automatically uses the first format which it supports. If no supported format is found or if the browsers lacks support for webfonts, the first available alternative font in the CSS rule will be used for the paragraph layout.

A font embedded this way will also be used for italic or bold fonts which often does not give good results as you normally would need different font styles. If you have multiple font styles available you can define them using @font-face blocks which all have the same name for the font but different indications for font-style and font-weight:

@font-face {
    font-family: MyNiceFont;
    src: url("/fonts/mynicefont-regular.eot") format("embedded-opentype"),
         url("/fonts/mynicefont-regular.woff") format("woff"),
         url("/fonts/mynicefont-regular.ttf") format("truetype");
}

@font-face {
    font-family: MyNiceFont;
    src: url("/fonts/mynicefont-italic.eot") format("embedded-opentype"),
         url("/fonts/mynicefont-italic.woff") format("woff"),
         url("/fonts/mynicefont-italic.ttf") format("truetype");
    font-style: italic;
}

@font-face {
    font-family: MyNiceFont;
    src: url("/fonts/mynicefont-bold.eot") format("embedded-opentype"),
         url("/fonts/mynicefont-bold.woff") format("woff"),
         url("/fonts/mynicefont-bold.ttf") format("truetype");
    font-weight: bold;
}

@font-face {
    font-family: MyNiceFont;
    src: url("/fonts/mynicefont-bold-italic.eot") format("embedded-opentype"),
         url("/fonts/mynicefont-bold-italic.woff") format("woff"),
         url("/fonts/mynicefont-bold-italic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

Legal

Fonts are usually copyrighted material like pictures – therefore you should not just copy fonts you like from other web sites if the free use is not explicitly indicated. Better you look for free fonts at official providers as http://www.fontsquirrel.com/ you  buy a suitable license.

Update: Embedding webfonts as data URL

In  this article you find a more efficient method for embedding webfonts as data URL.

Leave a public comment

Your email address will not be published. If you want to contact me personally, see the imprint.