font-face property - Script Tutorials

Contents

Definition and Usage
Syntax
Descriptors
Examples
Compatibility
Desktop browsers
Mobile browsers

Definition and Usage

The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

Syntax

@font-face {
  [font-family: <family-name>;]?
  [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
  [unicode-range: <urange>#;]?
  [font-variant: <font-variant>;]?
  [font-feature-settings: normal|<feature-tag-value>#;]?
  [font-stretch: <font-stretch>;]?
  [font-weight: <weight>];
  [font-style: <style>];
}

Descriptors

family-name: Specifies a font name that will be used as font face value for font properties.
src: URL for the remote font file location, or the name of a font on the user’s computer in the form local("Font Name"). You can specify a font on the user’s local computer by name using the local() syntax. If that font isn’t found, other sources will be tried until one is found.
font-variant: A font-variant value.
font-stretch: A font-stretch value.
font-weight: A font weight value.
font-style: A font style value.
unicode-range: The range of unicode code points defined in the font-face rule.

Examples

This example simply specifies a downloadable font to use, applying it to the entire body of the document.View live sample

<html> 
  
<head> 
  
  <title>Web Font Sample</title> 
  
  <style type="text/css" media="screen, print"> 
  
    @font-face { 
  
      font-family: "Bitstream Vera Serif Bold"; 
  
      src: url("webfont.ttf"); 
  
    } 
  
    body { font-family: "Bitstream Vera Serif Bold", serif } 
  
  </style> 
  
</head> 
  
<body> 
  
  This is Bitstream Vera Serif Bold. 
  
</body> 
  
</html>

In this example, the user’s local copy of “Helvetica Neue Bold” is used; if the user doesn’t have that font installed (two different names are tried), then the downloadable font named “MgOpenModernaBold.ttf” is used instead:

@font-face { 
  
  font-family: MyHelvetica; 
  
  src: local("Helvetica Neue Bold"), 
  
  local("HelveticaNeue-Bold"), 
  
  url(MgOpenModernaBold.ttf); 
  
  font-weight: bold; 
  
}

Compatibility

Desktop browsers

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	3.5 (1.9.1)	4.0	4.0	10.0	3.1
WOFF	3.5 (1.9.1)	6.0	9.0	11.10	5.1
SVG Font	Not supported Unimplemented (see bug 119490)	(Yes)	Not supported	(Yes)	(Yes)
`unicode-range`	Not supported	(Yes)	9.0	(Yes)	(Yes)

Mobile browsers

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mini	Opera Mobile	Safari Mobile
Basic support	(Yes)	1.0 (1.9.1)	NA	Not supported	10.0	(Yes)
WOFF	NA	5.0 (5.0)	NA	Not supported	11.0	Not supported
SVG fonts	NA	Not supported Unimplemented (see bug 119490)	NA	Not supported	10.0	(Yes)
`unicode-range`	NA	Not supported	NA	Not supported	NA	(Yes)