CSS3 Fonts
CSS3 @font-face rules
With previous versions of CSS, web designers had to use fonts that were already installed on users' computers.
With CSS3 , a web designer can use any font he/she likes.
When you find the font file you want to use, simply include the font file in the website and it will be automatically downloaded to the users who need it.
The font of your choice is described in the new CSS3 version with regard to the @font-face rule.
Your "own" fonts are defined in CSS3 @font-face rules.
Browser support
The numbers in the table represent the first browser version number 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 support WOFF (Web Open Font Format) fonts.
Firefox, Chrome, Safari, and Opera support .ttf (True Type fonts) and .otf (OpenType) font types).
Chrome, Safari and Opera also support SVG fonts/folds.
Internet Explorer also supports EOT (Embedded OpenType) fonts.
Note: Internet Explorer 8 and earlier do not support the new @font-face rules.
Use the font you need
In the new @font-face rule, you must first define the name of the font (eg myFirstFont) and then point to the font file.
![]() | Tip: Please use lowercase letters for URLs, uppercase letters will produce unexpected results in IE |
---|
To use a font for an HTML element, refer to the font's name (myFirstFont) through the font-family attribute:
Example
<style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; } </style>
Use bold text
You have to add another @font-face rule with bold text:
Example
@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }
The file "Sansation_Bold.ttf" is another font file that contains the bold font of the Sansation font.
Browsers should render this text bold when using the font family "myFirstFont".
This way you can have many @font-face rules for the same font.
CSS3 font description
The following table lists all font descriptions and @font-face rule definitions inside:
Property | value | Description |
---|---|---|
font-family | name | Required. Specifies the name of the font. |
src | URL | Required. Defines the URL of the font file. |
font-stretch |
| Optional. Defines how to stretch the font. Default is "normal". |
font-style |
| Optional. Defines the style of the font. Default is "normal". |
font-weight |
| 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. The default is "U+0-10FFFF". |