Web fonts are used to allow the fonts in CSS, that are not installed on the local system. After choosing the not installed font, just include the font file on the web server and it will be automatically downloaded when needed.
Syntax
Following are the different types of font formates:
- TrueType Fonts (TTF)
- OpenType Fonts (OTF)
- The Web Open Font Format (WOFF)
- SVG Fonts/Shapes
- Embedded OpenType Fonts (EOT)
TrueType Fonts (TTF):
The TrueType Font (TTF) file format was created by both Apple Computer and Microsoft Corporation. It is the most common format for fonts used in both Mac and Windows operating systems. The main advantage of TrueType font format is that the glyphs are scalable, meaning that it can be set to any scale and at any point size.
OpenType Fonts (OTF):
An Open Type Font (OTF) file is a font format developed by Adobe and Microsoft. It combines aspects of PostScript and TrueType font formats and is fully scalable, which means the font can be resized without losing quality. This font format is supported by Mac OS X and Windows 2000 and later.
Web Open Font Format (WOFF):
Web Open Font Format (WOFF) is a font format is used in web pages developed by Mozilla in concert with Type Supply, LettError, and other organizations. WOFF is basically an OpenType or TrueType with compression and additional metadata. The main aim of WOFF is to support font distribution from a server to a client over a network with bandwidth constraints.
SVG Fonts/Shapes:
SVG is a Scalable Vector Graphics. When SVG was first specified, support for web fonts was not widespread in browsers. But in order to rendering text correctly, a font description technology was added to SVG to provide this ability. It provide the means of embedding glyph information into SVG when rendered.
Embedded OpenType Fonts (EOT):
The Embedded OpenType font Format was designed by Microsoft. These fonts are a compact form of OpenType fonts to use as embedded fonts on web pages. These files use the extension .eot. It was designed with the purpose of enabling TrueType and OpenType fonts to be linked to web pages for download to render the web page with the font as required by the user.
Font Descriptors
The descriptors can be added inside the @font-face rule. The following are the different types of font descriptors.
- font-family: It is used to define the name of font. It is required for web fonts to function.
- src: It is used to define the URL from which we get the font. Like font-family the src is also required. Except these two fields the rest of the descriptors are optional.
- font-stretch: This property is used to find, how font should be stretched. Normal is the value taken by default. The different font stretch values are normal, condensed, semi-condensed, ultra-condensed, extra-condensed, expanded, semi-expanded, extra-expanded and lastly ultra-expanded.
- font-style: It is used to define the font different styles. The different styles that can be set are oblique and the default style is normal.
- font-weight: The weight of the font can be defined using this descriptor. Default value of font-weight is “normal”. The different values for the boldness are normal, bold, and we can also give numerical values ranging from 100-900 in increments of 100.
For bold and italic text