CSS Web fonts
- Previous Page CSS Text Effects
- Next Page CSS 2D Transformations
CSS @font-face rule
Web fonts allow web designers to use fonts that are not installed on the user's computer.
After you find/purchase the font you want to use, simply include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your 'own' fonts in CSS @font-face are defined in the rules.
Different font formats
TrueType font (TTF)
TrueType is a font standard developed by Apple and Microsoft in the late 1980s. TrueType is the most commonly used font format for the Mac OS and Microsoft Windows operating systems.
OpenType font (OTF)
OpenType is a scalable computer font format. It is based on TrueType and is a registered trademark of Microsoft. Today, OpenType fonts are widely used on major computer platforms.
Web Open Font Format (WOFF)
WOFF is a font format for the web. It was developed in 2009 and has since become a recommended standard by the W3C. WOFF is essentially a compressed OpenType or TrueType with additional metadata. The goal is to support font distribution from server to client over networks with bandwidth limitations.
Web Open Font Format (WOFF 2.0)
TrueType/OpenType fonts provide better compression than WOFF 1.0.
SVG font/shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification defines a font module that allows fonts to be created within SVG documents. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text within SVG documents.
Embedded OpenType font (EOT)
EOT font is a compact form of OpenType font designed by Microsoft, used as embedded font on web pages.
Browser Support for Font Formats
The numbers in the table indicate the first browser version that fully supports the font format.
| Font Format | |||||
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE:This font format is only valid when set to "installable".
*Firefox:Not supported by default, but can be enabled (the flag must be set to "true" to use WOFF2).
Use the font you need
In the @font-face rule: first define the font name (e.g., myFirstFont), then point to the font file.
Tip:Font URLs should always be in lowercase letters. Uppercase letters may produce unexpected results in IE.
To use the font for HTML elements, refer to the font name (myFirstFont) through the font-family attribute:
Example
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Using bold text
You must add another @font-face rule that includes the descriptor for bold text:
Example
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
The file "sansation_bold.woff" is another font file that contains the bold characters of the Sansation font.
When a paragraph with the "myFirstFont" font family should be displayed in bold, the browser will use it.
Thus, you can set many @font-face Rule.
CSS font rules.
The following table lists the font descriptions that can be used in @font-face All font descriptors (font descriptor) defined within the rule:
| Descriptor | Value | Description |
|---|---|---|
| font-family | name | It is required. Defines the font name. |
| src | URL | It is required. Defines the URL of the font file. |
| font-stretch |
|
Optional. Defines how the font should be stretched. The default value is "normal". |
| font-style |
|
Optional. Defines the style of the font. The default value is "normal". |
| font-weight |
|
Optional. Defines the weight of the font. The default value is "normal". |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters supported by the font. The default value is "U+0-10FFFF". |
- Previous Page CSS Text Effects
- Next Page CSS 2D Transformations
