With the @font-face rule, web designers do not have to use one of the “web-safe” fonts anymore. In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:
The @font-face CSS Rule
Web fonts enable Web designers to utilize fonts that aren’t already installed on the user’s machine. As you’ve found/purchased the font you want to use, simply include the font file on your web server, and it will be delivered to the user when needed.
The CSS @font-face rule defines your “own” typefaces.
Various Font Formats
Fonts in TrueType (TTF)
TrueType is a typeface standard established by Apple and Microsoft in the late 1980s. TrueType is the most widely used font format for both Mac OS and Microsoft Windows.
Fonts in OpenType (OTF)
OpenType is a scalable computer typeface format. It is based on TrueType and is a Microsoft registered trademark. OpenType fonts are widely utilised on today’s major computer platforms.
The Open Font Format for the Web (WOFF)
WOFF is a font format that may be used in web pages. It was created in 2009 and has now become a W3C Recommendation. WOFF is essentially OpenType or TrueType compressed with extra metadata. The purpose is to enable font delivery via a network from a server to a client.
The Open Font Format for the Web (WOFF)
WOFF is a font format that may be used in web pages. It was created in 2009 and has now become a W3C Recommendation. WOFF is essentially OpenType or TrueType compressed with extra metadata. The purpose is to enable font delivery from a server to a client across a network with limited bandwidth.
The Open Font Format for the Web (WOFF 2.0)
TrueType/OpenType font with more compression than WOFF 1.0. SVG Fonts/Shapes
SVG fonts allow SVG to be utilized as glyphs for displaying text. The SVG 1.1 specification defines a font module that permits the generation of typefaces within an SVG document. CSS may also be applied to SVG documents, and the @font-face rule can be applied to text in SVG documents.
Embedded OpenType Fonts (EOT)
EOT fonts are a compressed version of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
example
Using the Font of Your Choice
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:
