<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-face {
font-family: 'myFont';
src: url('webfont.eot');
/* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg');
/* Legacy iOS */
}
div {
font-family: myFont, sans-serif;
}
</style>
</head>
<body>
<h2>@font-face example</h2>
<div>
The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
</div>
<p>
The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
</p>
</body>
</html>