The usual variant for defining fonts looks something like this:
body { font-family: Arial, Helvetica, sans-serif; }Here, the Arial font is assigned to the body element. If this is not available on the viewer's system, Helvetica is used. If Helvetica is not available either, the browser is instructed to use at least one font without Serif. Of course, this cannot really be controlled. In the end, you have no real control over the final result. So whatever you have so beautifully laid out in GIMP or Photoshop may fall flat in the font jungle. More on how this problem can be solved later.
But first, back to the classic version. Below you will find a typical definition that is used to customize the basic appearance of the website. First of all, you can use the body definition to specify the basic font information.
body { font-family: Georgia, Tim, "Times New Roman", Serif; color: #000; font-size: 1.1em; line-height: 150%; } p { font-size: 1.1em; }
Of course, you can now design the individual elements of the page separately. This includes, for example, the headings, italic passages, etc. In this context, however, remember the inheritance principle of CSS.
h1 { font-size: 1.6em; }The result could then look like this in the browser:
Using web fonts
The problem with conventional font definitions is obvious: ultimately, you can't really be sure that the font you specify is actually available to the viewer. In case of doubt, browsers will select a font that is similar to the one you have specified if they cannot find it. Of course, you have no real control over the result. This is exactly where @font-face comes to the rescue. This allows you to explicitly specify a font to be used. In principle, this works in the same way as with images. You must therefore specify the path to the font file.
In modern browsers, the so-called WOFF web fonts are used for @font-face. These fonts are significantly smaller than the previously used EOT and TTF web font formats.
A typical @font-face definitionlooks like this:
@font-face { font-family: "Bitstream Vera Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); }
The name of the font to be used is noted in font-family. Up to this point, there are no syntax peculiarities. The URL under which the web font file is located is specified via src:url(). If there is a theoretical possibility that the font is available on the user's computer, you should also specify local. This local is assigned the name of the font.
@font-face { font-family: "Bitstream Vera Serif Bold"; local: "Bitstream Vera Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); }
After the @font-face definition, the web fonts can then be used as normal.
h1 { font-family: "Bitstream Vera Serif Bold"; font-size: 1.2em; color: #3399FF; }Here are the web fonts, for example
The question now, of course, is where to get the web font files in question. Google, for example, hosts many of these web fonts at http://www.google.com/fonts.
These fonts can be integrated directly via this page.
A corresponding call would look like this:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
The desired web font is specified after font-family. You can find these names and calls on the Google page mentioned above. Once you have integrated the web font, it can then be used like any other font.
body { font-family: 'Tangerine', Serif; font-size: 1.2em; }If you wish, you can also use several web fonts on your site. To do this, go to http://www.google.com/fonts and click on Add to Collection for the desired web fonts. Once all web fonts are in your collection, click on Use at the bottom of the page. A kind of speedometer is displayed directly there.
This illustration shows the effects that the integration of the web fonts has on the loading time of the page. These effects are actually measurable and increase with each additional web font.
The following example shows how easy it is to use several web fonts that you have previously added to your collection:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
The individual web fonts are therefore noted one after the other, separated by a vertical line. The complete call that matches the selected collection is displayed on the aforementioned Use page.
Many of the web fonts offer so-called subsets such as Latin or Cyrillic. To include these explicitly, enter the desired subset as a parameter value.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
If several of these subsets are to be used, they are each separated by a comma.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
However, the use of this web font is not uncontroversial for a completely different reason. First of all, a connection to a Google server must be established when the page is called up. This can be avoided by downloading the web font file and uploading it to your own server. However, always pay attention to the terms of use of the web fonts that you want to use in this way.
The font definition of the example page
Below you will find the font definitions that I will use for the current example page:
body { font-family: 'Crimson Text', Helvetica, sans-serif; color: #444; text-decoration: none; line-height: 1.5em; font-size: 1.2em; } p { font-size: 1.1em; } h1 { font-size: 1.6em; color: #3399FF; }
Of course, you can include additional elements. In the current case, however, this syntax is sufficient.
