CSS3 font

May 04, 2021 03:00 CSS3

Table of contents

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.

@font-face 4.0 9.0 3.5 3.2 10.0

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.

CSS3 font 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:

CSS3 font CSS3 font CSS3 font CSS3 font CSS3 font
font-family: myFirstFont;
src: url(sansation_light.woff);


Try it out . . .

Use bold text

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

CSS3 font CSS3 font CSS3 font CSS3 font CSS3 font
font-family: myFirstFont;
src: url(sansation_bold.woff);

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:

The descriptor Value Describe
font-family name Necessary. Specify the name of the font.
Src Url Necessary. Define the URL of the font file.
  • normal

  • condensed

  • ultra-condensed

  • extra-condensed

  • semi-condensed

  • expanded

  • semi-expanded

  • extra-expanded

  • ultra-expanded

Optional. D efines how fonts are stretched. The default is "normal".
  • normal

  • italic

  • oblique

Optional. D efine the style of the font. The default is "normal".
  • normal

  • bold

  • 100

  • 200

  • 300

  • 400

  • 500

  • 600

  • 700

  • 800

  • 900

Optional. D efines the weight of the font. The default is "normal".
unicode-range unicode-range Optional. D efines the range of UNICODE characters supported by the font. The default is "U-0-10FFFF".
It's a good idea to favorite or save the font description in the table above so that you'll need to find it when programming in the coming year! This will save you a lot of valuable work time.