@font-face

The @font-face CSS rule defines a custom font to used for text content. The font can come from a remote server or font installed locally on user's computer.

Syntax

  
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
  

Values

Based on whether and when a font face is downloaded and ready to use, this property determines how it is displayed.
Provides a name to be used as the font face value in font properties.
A value for font-stretch. It also accepts two values to specify a range that a font-face supports, such as font-stretch: 120% 70%;
The value of a font style. This accepts two values to specify a range that is supported by a font-faceThe value of a font style. This accepts two values to specify a range that is supported by a font-face, e.g font-style: oblique 20deg 30deg;
The weight of the font. This accepts two values to specify a range that is supported by a font-face , e.g font-weight: 200 100;
A font-variant value.
Allows advanced typographic features in OpenType fonts to be controlled.
Allows for low-level control of OpenType or TrueType font variations by specifying the four letter axis names of the features to be changed, as well as their variation values.
Defines the resource containing the font data. A URL to a remote font file location or the name of a font on the user's computer should be used..
The font's range of Unicode code points to be used.

We use cookies to improve your experience. Learn more in our Privacy policy.

×