CSS3 font

CSS3 font

CSS3 @font-face rule

Before CSS3, web designers had to use fonts that had been installed on the user's computer and could not use offline fonts, but with CSS3, web designers could use any font they liked.

When you find or purchase a font that you want to use, you can store the font file on a web server, which is automatically downloaded to the user's computer when needed.

Your "own" font is defined in the CSS3 @font-face rule.

Browser support

The numbers in the table support the first browser version number of the property.

Internet Explorer 9 Plus, Firefox, Chrome, Safari, and Opera support WOFF fonts.

Firefox, Chrome, Safari, .ttf Opera support True Type .otf and 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 versions do not support the @font-face rule.

Use the font you need

In @font-face rule, you must first define the name of the font, such as myFirstFont, and then point to the font file.

	Tip: URL Please use lowercase font, capital letters in IE will produce unexpected results

If you need to use a font for an HTML element, refer to the name of the font (myFirstFont) with the font-family property, and you can try it in the following example:

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

div
{
font-family:myFirstFont;
}
</style>

Try it out . . .

Use bold text

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

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

Try it out . . .

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

The browser should appear in bold when using myFirstFont, the font family of this text.

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

CSS3 font description

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