The @font-face rule is used to associate a font name to be used in a style sheet with some downloadable font. A font-family descriptor is used within the rule to name the font and a src descriptor is associated with an external font name.
Web fonts allow Web designers to use fonts that are not installed on the user's computer.When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.Your "own" fonts are defined within the CSS @font-face rule.
The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.Without the rule, our designs are limited to the fonts that are already loaded on a user's computer, which vary depending on the system being used.
OpenType fonts can include an expanded character set and layout features, providing broader linguistic support and more precise typographic control. Feature-rich Adobe OpenType fonts can be distinguished by the word "Pro," which is part of the font name and appears in application font menus. OpenType fonts can be installed and used alongside PostScript Type 1 and TrueType fonts.
OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.
The WOFF 2.0 specification is implemented in all major browsers, and is widely used on production websites. It supports the entirety of the TrueType and OpenType specifications, including Variable fonts, Chromatic fonts, and font Collections.TrueType/OpenType font that provides better compression than WOFF 1.0.
A TrueType font is a font standard and is the major type of font found in both Mac and Microsoft Windows operating systems. It consists of a single binary file which contains a number of tables related to printer and screen versions of the typeface. Developed by Apple and Microsoft, it gave font developers the much needed flexibility for control of the precise characteristics for font display.TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.
The Embedded Font Format (EOT) was developed by Microsoft to enable OpenType fonts to be linked to web pages for download to render the web page with the font the author desired. This appendix specifies the format of the .EOT file so that User Agents can download, extract and temporarily install fonts of the .EOT file suffix that are included in the @font-face definition of a CSS style sheet. Example pages can be found at the Microsoft Typography site on Font Embedding for the Web.
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
When SVG was specified, support for web fonts was not widespread in browsers. Since accessing the correct font file is however crucial for rendering text correctly, a font description technology was added to SVG to provide this ability. It was not meant for compatibility with other formats like PostScript or OTF, but rather as a simple means of embedding glyph information into SVG when rendered.
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.
WOFF (the Web Open Font Format) is a web font format developed by Mozilla in concert with Type Supply, LettError, and other organizations. It uses a compressed version of the same table-based sfnt structure used by TrueType, OpenType, and Open Font Format, but adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired.The goal is to support font distribution from a server to a client over a network with bandwidth constraints.
In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:You must add another @font-face rule containing descriptors for bold text:
| Description | 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" |