CSS Web Fonts
If you don't want to use the web-safe fonts (and who wants to see another website in Arial or Times New Roman!), you are in luck.
Web fonts allow the CSS to link to a font file that the browser can download.
By using a web font, you can have a much more consistent look – plus,
There are many beautiful web fonts out there that will enhance the look of your site or app.
There are several different supported web font formats -
Modern browsers support WOFF and WOFF2.
The other font formats are for support with older browsers.
A web font is typically packaged in several different formats, all of which can be referenced in the CSS.
@font-face
A web font is registered using the @font-face at-rule.
A @font-face rule declares a new font. The desired name of the font is given with the font-family property, and one or more source URLs are given with the src property.
Each source URL is followed by a format declaration which tells the browser which font format to expect for that file.
Once you have declared the font in a @font-face rule, you can then use the name you gave it in any font-family property in a CSS rule.
Example - This example will load the SomeWebFont font in WOFF2 and WOFF formats and set it as the font for the whole document. You should still provide a list of fallback fonts in case the font is not supported by the user's browser or could not be loaded.
|
@font-face {
font-family: 'SomeWebFont';
src:
url('/some-font.woff2') format('woff2'),
url('/some-font.woff') format('woff');
}
body {
font-family: SomeWebFont, Arial, sans-serif;
}
<body>
<h1>This is a heading
</h1>
<p>Lorem ipsusdf Lorem ipsum dolor sit amet,</p>
</body>
|
Output -
