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.

Example

Preview

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