CSS Web Fonts
The CSS @font-face Rule
Web designers can utilize fonts that are not installed on the user’s computer thanks to web fonts.
Simply include the font file on your web server after you have located or purchased the font you want to use, and the user will automatically download it as needed.
The CSS @font-face rule defines your “own” typefaces.
Different Font Formats
TrueType Fonts (TTF)
The TrueType font standard was created by Apple and Microsoft in the latter part of the 1980s. For both Microsoft Windows and Mac OS, TrueType is the most widely used font format.
OpenType Fonts (OTF)
Scalable computer fonts can be found in the OpenType format. It was developed using TrueType and is a Microsoft registered trademark. These days, OpenType fonts are widely utilized across all major computer platforms.
The Web Open Font Format (WOFF)
A font format for usage in web pages is called WOFF. Created in 2009, it is currently a W3C recommendation. WOFF is just TrueType or OpenType plus extra metadata and compression. Supporting font distribution across a network with limited bandwidth from a server to a client is the aim.
The Web Open Font Format (WOFF 2.0)
Better compression than WOFF 1.0 is provided by a TrueType/OpenType font.
SVG Fonts/Shapes
When displaying text, SVG can be utilized as glyphs thanks to SVG fonts. An SVG document can have fonts created for it thanks to a font module defined in the SVG 1.1 specification. Additionally, SVG documents support CSS, and text within them can use the @font-face rule.
Embedded OpenType Fonts (EOT)
Microsoft created EOT fonts, a condensed version of OpenType fonts, to be used as embedded fonts on websites.
Browser Support for Font Formats
The numbers in the table specifies the first browser version that fully supports the font format.
Using The Font You Want
Point to the font file after defining the font’s name (such as myFirstFont) in the @font-face rule.
Advice: When using a font URL, always use lowercase letters. In IE, capital letters might produce unexpected outcomes.
Use the font-family property to refer to the font’s name (myFirstFont) in order to use it for an HTML element:
Example
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Using Bold Text
For bold text, you need to add an additional @font-face rule with descriptors:
Example
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
The bold characters for the Sansation typeface are found in another font file called “sansation_bold.woff”.
This is what browsers will use if they want text that has the font-family “myFirstFont” to appear bold.
In this manner, several @font-face rules can be applied to the same font.
CSS Font Descriptors
The following table lists all the font descriptors that can be defined inside the @font-face rule:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |
