CSS Web Fonts
Web fonts are used to allow CSS to use fonts that are not installed on the local system. After selecting the not-installed font, simply include the font file on the web server, and it will be downloaded automatically when needed.
Syntax
Font Format Types: The following font formats are examples of font formats:
- TrueType Fonts (TTF): TrueType is the most commonly used font format, whether using Microsoft or Mac operating systems. Microsoft and Apple created this font standard in the late 1980s. Each glyph in a TrueType font is described as a set of paths. A path is a closed curve defined by points and specific mathematics. A lower case I for example, has two paths, one for the dot and one for the rest of it. To create the final letter form, pixels are used to fill the path. TrueType fonts have the advantage of being scalable, which means they can be set to any scale and point size.
- OpenType Fonts (OTF): OpenType is a font format based on TrueType. The OpenType font format was created by Microsoft and Adobe, but Microsoft is the registered trademark. OpenType font layout features are organized by scripts and languages, allowing a single font to support multiple writing systems within the same script. To name a few, the OpenType font format addresses the goals of better font data protection and broader multi-platform support.
- The Web Open Font Format (WOFF): WOFF is a font format used in web pages that Mozilla created in collaboration with Type Supply, LettError, and other organizations in 2009. WOFF is essentially an OpenType or TrueType font with compression and extra metadata. WOFF's goal is to support font distribution from a server to a client over a network with limited bandwidth. WOFF comes in two flavors: WOFF and WOFF2. The main difference between the two is the compression algorithm used. They are described by the format descriptors 'woff' and 'woff2', respectively.
- Embedded OpenType Fonts (EOT): Microsoft created the Embedded OpenType File Format. EOT fonts are a compressed version of OpenType fonts that can be used as embedded fonts on web pages. It was created with the intention of allowing TrueType and OpenType fonts to be linked to web pages for download in order for the user to render the web page with the required font.
- SVG Fonts/Shapes: SVG is an abbreviation for Scalable Vector Graphics. When SVG was first defined, the majority of web browsers did not fully support web fonts. However, in order to render text correctly, a font description technology was later added to SVG. It allows for the embedding of glyph information into SVG when rendered.
Property Values
| @font-face | Value | Description |
|---|---|---|
| font-family | name | Required. The font's name is defined here. |
| src | URL | Required. Optionally specify the URL(s) from which the font should be downloaded. This property specifies how the font should be stretched. The default setting is "normal." |
| font-stretch |
normal
condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. This property specifies how the font should be styled. The default setting is "normal." |
| font-style |
normal italic oblique |
Optional. Defines the font's boldness. The default setting is "normal." |
| font-weight |
normal
bold 100 200 300 400 500 600 700 800 900 |
Optional. The range of unicode characters that the font supports is defined here. "U+0-10FFFF" is the default value. |
| unicode-range | unicode-range | Optional. The range of unicode characters that the font supports is defined here. "U+0-10FFFF" is the default value. |
Supported Browsers
| Element | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| TTF/OTF | 4.0 | 3.5 | 3.1 | 9.0 | 10.0 |
| WOFF | 5.0 | 3.6 | 5.1 | 9.0 | 11.1 |
| WOFF2 | 36.0 | 39.0 | 10.0 | 14.0 | 26.0 |
| SVG | Not supported | Not supported | 3.2 | Not supported | Not supported |
| EOT | Not supported | Not supported | Not supported | 6.0 | Not supported |