CSS3 Font

With CSS3, web designers are no longer forced to use only web-safe fonts

CSS3 @font-face rule

With previous versions of CSS, web designers had to use fonts already installed on the user's computer.

UsageCSS3Web designers can use any font they like.

When you find the font file you want to use, simply include the font file in your website, and it will be automatically downloaded to the users who need it.

The font you selected in the newCSS3Version related to@font-faceRule description.

Your "own" font is atCSS3 @font-faceDefined in the rules.

Browser Support

The numbers in the table specify the first browser version that supports the property.

Property
@font-face 4.0 9.0 3.5 3.2 10.0

Internet Explorer 9+, Firefox, Chrome, Safari, and Opera Supported WOFF (Web Open Font Format) Font.

Firefox, Chrome, Safari, and Opera Supported .ttf(True TypeFont)and.otf(OpenType)FontFonttype).

Chrome, Safari, and Opera also support SVG fonts/collapse.

Internet Explorer also supports EOT (Embedded OpenType) fonts.

Note:Internet Explorer 8 and earlier versions do not support the new @font-face rule.

Use the font you need

In the new @font-face rule, you must first define the name of the font (for example, myFirstFont), and then point to the font file.

lamp Tip:Use lowercase font names for URLs; uppercase letters can produce unexpected results in IE

To use the font for an HTML element, refer to the font's name (myFirstFont) through the font-family property:

OperaSafariChromeFirefoxInternet Explorer

Example

<style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>

Try it Yourself »

Use bold text

You must add another @font-face rule that contains bold text:

OperaSafariChromeFirefoxInternet Explorer

Example

@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }

Try it Yourself »

The file "Sansation_Bold.ttf" is another font file that contains the bold characters of the Sansation font.

When the browser uses the font family "myFirstFont" for this text, it should be rendered as bold.

This way you can have many @font-face rules for the same font.

CSS3 font description

The following table lists all the font descriptors and the definitions inside the @font-face rule:

descriptor Value Description
font-family name Required. Specifies the name of 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 is stretched. Default is "normal".
font-style
  • normal
  • italic
  • oblique
 Optional. Defines the style of the font. Default is "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Optional. Defines the weight of the font. Default is "normal".
unicode-range unicode-range Optional. Defines the range of UNICODE characters supported by the font. Default is "U+0-10FFFF".
other extensions