Not always standard built-in fonts, like Arial or Verdana, can be convenient. It is not uncommon for a web designer to want to take advantage of the capabilities of some other font, which is not among the built-in ones, but which is available from an external file. Such a font can be included using the font-face directive :
@font-face {
font-family: 'OpenSans';
src: url(http://fonts.gstatic.com/s/OpenSans/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2);
}
The property font-familyspecifies the name of the font, and the property specifies the srcpath to the font.
In this case, the web page will load a font that is located on the Internet at https://fonts.google.com/specimen/Open+Sans
Alternatively, we can download the font file to our local computer and upload it to the web page from there. As a rule, to store your fonts, you create a fonts folder next to the web page :
@font-face{
font-family: 'OpenSans';
src:url('fonts/OpenSans.ttf');
}
After connecting the font, it can be used in styles:
p{
font-family: OpenSans
}
In this case, the font used is OpenSans, created by Google and defined in a woff2 file. However, not all browsers support this font format.
Roughly speaking, there are several different font formats: TrueType (ttf extension), Open Type (otf extension), Embedded Open Type (eot extension), Web Open Font Format (woff/woff2), Scalable Vector Graphic (svg). Different browsers may support different fonts. And to solve the problem of font support, font creators often create several formats at once. And we can immediately identify these formats. For example:
@font-face {
font-family:'FontAwesome';
src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.eot');
src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.woff2') format('woff2'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.woff') format('woff'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.ttf') format('truetype'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.svg') format('svg');
}
As in the previous case, the properties font-family and srcset the name and path to the font. But now another property is also added for compatibility src. The second src property sets multiple fonts at once. The first font is also an EOT font, but now the value is added to the .eot file extension ?#iefix. This is done for compatibility with Internet Explorer versions 6-8. If this value is not added after .eot, the font may not display correctly in Internet Explorer 6-8.
The url parameter is followed by the font format definition:
format('embedded-opentype')
When the browser starts loading a web page that has a font defined in this way, the browser will not load all fonts in all formats, but will only load the first font that it understands.
Different font versions
Download the OpenSans font from the OpenSans link to your local computer. Let’s unpack the downloaded archive into a folder, which we will call fonts, and put this folder in one directory next to the web page. In the downloaded OpenSans font folder, we can see that it contains not just one file, but several at once:
Why do we need so many files? The point is that each font must define a separate style for plain text, for italic text, for bold text, for text that combines bold and italic, and so on.
To allow the browser to automatically recognize different font variants, the font-weight and font-style properties are added to the @font-face directive , which set bold and italic respectively:
@font-face {
font-family: 'OpenSans';
src: url(fonts/OpenSans-Regular.ttf);
font-weight: normal;
font-style: normal;
}
p{
font-family: OpenSans;
}
Since the font version OpenSans-Regular.ttfis applied to text that is not italicized and bold, the following values are set along with it:
font-weight: normal; font-style: normal;
That is, by doing so, we set that there will be no italic selection ( font-style: normal;) and no bold selection ( font-weight: normal;)
In addition to the version OpenSans-Regular.ttf, as seen above in the picture, there are other versions of the OpenSans font in the folder. For example, the italic version of the OpenSans-Italic.ttf font and a number of others.
If we want the browser to use the italic version when italicizing, then we need to add another font-face directive:
@font-face {
font-family: 'OpenSans';
src: url(fonts/OpenSans-Italic.ttf);
font-weight: normal;
font-style: italic;
}
The value font-style: italic indicates that this version of the font should be used in italics.
Similarly, we can set the versions of the font that should be used when the selection is both bold and italic, or only when highlighted in bold:
@font-face {
font-family: 'OpenSans';
src: url(fonts/OpenSans-Bold.ttf);
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url(fonts/OpenSans-BoldItalic.ttf);
font-weight: bold;
font-style: italic;
}
The value font-weight: bold indicates that this version of the font is applied when bolded.
Now let’s use all these fonts:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonts in CSS3 </title>
<style>
@font-face {
font-family: 'OpenSans';
src: url(fonts/OpenSans-Regular.ttf);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url(fonts/OpenSans-Italic.ttf);
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'OpenSans';
src: url(fonts/OpenSans-Bold.ttf);
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url(fonts/OpenSans-BoldItalic.ttf);
font-weight: bold;
font-style: italic;
}
p {
font-family: OpenSans;
}
</style>
</head>
<body>
<p>OpenSans style can italicize and bold or both </p>
</body>
</html>
Text in tags that uses italics will now use the “OpenSans-Italic.ttf” version, and text in tags will use the “OpenSans-Bold.ttf” font.
Font sources
You can find many non-standard fonts on the Internet. The most popular font repository is https://www.google.com/fonts/ , a set of fonts from Google.
Also another famous font repository is Font Squirrel .
We should also mention such a popular font as FontAwesome . It provides many different interesting icons that can be used on a web page.