How to use fonts on the web

Web design is primarily typography. Dot. The user spends most of his time on the page reading the text. The information on the website is presented in 95% of the written text. The lion’s share of Google’s success is due to its minimalist design. It is based on the text used in a typographically clean user interface. In this article, we will show you how to ensure that a font is used as reliably as, for example, a PNG image.

Fonts on the web

We have six font formats available for us to use on the site. The first is TrueDoc, which used Netscape Navigator 4. The second is Embedded OpenType, supported by Internet Explorer since the fourth version. Browser manufacturers Mozilla and Opera have chosen TrueType and OpenType formats. The SVG format also had its own ambitions in the field of fonts. Fortunately, Mozilla, Opera, and Microsoft came to an agreement and submitted a specification for the new Web Open Font Format to the W3C in January 2010.

Since WOFF is not yet supported by all browsers, it is necessary to convert the font to other formats. To do this, you can use the @font-face Generator web application. Not only does it convert fonts to all possible formats, but it also adds an example of use. In addition, it ensures that the Embedded OpenType font is usable on any domain. The format is designed so that someone cannot easily use the font on a website other than the one for which it is licensed. Therefore, fonts created by this generator do not work if the page is opened from the local file system (file:///).

How to do it?

Let’s say we want to use a new Ubuntu font on our website, for example. We will have the relevant files converted Ubuntu-R.ttf, Ubuntu-B.ttf and Ubuntu-I.ttf. By default, the generated CSS looks like this:

@font-face {
	font-family: 'UbuntuRegular';
	src: url('ubuntu-r-webfont.eot');
	src: local('☺'), url('ubuntu-r-webfont.woff') format('woff'), url('ubuntu-r-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'UbuntuItalic';
	src: url('ubuntu-i-webfont.eot');
	src: local('☺'), url('ubuntu-i-webfont.woff') format('woff'), url('ubuntu-i-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'UbuntuBold';
	src: url('ubuntu-b-webfont.eot');
	src: local('☺'), url('ubuntu-b-webfont.woff') format('woff'), url('ubuntu-b-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

The syntax of @font-face is simple. It contains two mandatory information:

font-family – name under which the font will be available
src – reference to font URI In addition to this data, it may also contain information about the font style (font-weight, font-style or font-variant). This allows us to concentrate different source files under one common name and refer to it in a standard way.

Note that property src is mentioned twice. The first time for Internet Explorer, which does not take into account the second occurrence because it does not know the format parameter. The value is invalid for it, and the first one is used. Other browsers understand the second notation, so the value src in the second occurrence overrides the first one. The local parameter has a meaningless value, as its interpretation in Webkit and OS X is not very well implemented.

Some people may not like this code because it resembles CSS hack practices. They must have caused many problems for those who used them. An alternative solution is to branch to individual files one level higher. However, it can be objected that different font families are introduced not on the basis of appearance, but on the file format. Another notation might look like this:

/* Web Open Font Format */

@font-face {
    font-family: Ubuntu WOFF;
    src: url(Ubuntu-R.woff);
}

@font-face {
    font-family: Ubuntu WOFF;
    src: url(Ubuntu-I.woff);
    font-style: italic;
}

@font-face {
    font-family: Ubuntu WOFF;
    src: url(Ubuntu-B.woff);
    font-weight: bold;
}

/* Embedded OpenType */

@font-face {
    font-family: Ubuntu EOT;
    src: url(Ubuntu-R.eot);
}

@font-face {
    font-family: Ubuntu EOT;
    src: url(Ubuntu-B.eot);
    font-weight: bold;
}

@font-face {
    font-family: Ubuntu EOT;
    src: url(Ubuntu-I.eot);
    font-style: italic;
}

/* TrueType */

@font-face {
    font-family: Ubuntu TTF;
    src: url(Ubuntu-R.ttf);
}

@font-face {
    font-family: Ubuntu TTF;
    src: url(Ubuntu-I.ttf);
    font-style: italic;
}

@font-face {
    font-family: Ubuntu TTF;
    src: url(Ubuntu-B.ttf);
    font-weight: bold;
}

body {
    font-family: Ubuntu WOFF, Ubuntu EOF, Ubuntu TTF;
}

CSS for element body tells the browser to try each format and use the first supported one. Fonts are downloaded gradually, so modern browsers will only download a set in WOFF format.

What can be highly recommended, however, is to group all typefaces under one name. The font family is then listed three times, each with a specific font style. This can also be achieved by setting up the generator appropriately. It is equally important to set (option subsetting) to include only those characters that we actually use on the website. The font will then not be so large and users will load the page a little earlier.

Grouping fonts under a single name with different properties will look like this:

@font-face {
    font-family: 'Ubuntu';
    src: url('Ubuntu-R-webfont.eot');
    src: local('☺'), url('Ubuntu-R-webfont.woff') format('woff'), url('Ubuntu-R-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('Ubuntu-I-webfont.eot');
    src: local('☺'), url('Ubuntu-I-webfont.woff') format('woff'), url('Ubuntu-I-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('Ubuntu-B-webfont.eot');
    src: local('☺'), url('Ubuntu-B-webfont.woff') format('woff'), url('Ubuntu-B-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

With such a definition, the fonts can then be used in the same way as the system fonts, i.e. to take advantage of all the benefits of cascade. For example, you can set a font family for the p element, and thanks to the singular name, the browser can correctly handle tags such as i or strong, which change the default font properties.

Finally

For browsers that are not yet familiar with WOFF, there is no one hundred percent correct and universal CSS notation. Based on their experience, the encoder must make sure that each browser downloads the font in the format that it supports best. So it’s up to you which CSS notation you choose and how you modify it to make it effective on your website.

Web Open Font Format is perhaps the fastest implemented specification. At the moment (November 2010), it is already supported by Internet Explorer, Firefox and Chrome. So we definitely won't make a mistake if we bet on this format in the future. Unfortunately, iPhone and iPad only support SVG format. However, its use for writing is not very suitable. It lacks one essential skill – leveling the gaps between letters. Internet Explorer 8 and earlier only understands the Embedded OpenType format. In contrast, TrueType works in Firefox, Chrome, Opera, and Safari.

But typography is not just about choosing the right font. It is also important to use the correct characters. Know that a hyphen is different from a hyphen and don't confuse thumbs with quotation marks. We are no longer limited by the number of keys or ASCII encoding. It is also important to think about using the possibility of hyphenation in HTML in narrow columns of text.

The article was written for Zdroják.