@font-face

CSS @font-face is a rule which allows web designers to define online fonts to display text on their website. So that, web designers won't need to use "web-safe fonts" anymore.

We must first define a name for the font (like myFirstFont) in the new @font-face rule and then point to the font file.

The @font-face property is supported in Internet Explorer, Firefox, Opera, Chrome, and Safari.

The @font-face property must be cross browser.

CSS Syntax

@font-face {
    font-properties
}

Each browser has his own format. We are using ttf, otf, eot, svg, woff formats.

OTF / TTF

OpenType Font and TrueType Font. In part because these formats could easily (and illegally) be copied, the WOFF format was created. However, OpenType has capabilities that many designers might be interested in (ligatures and such).

EOT

Embedded Open Type. This format was created by Microsoft (the original innovators of @font-face) over 15 years ago. It’s the only format that IE8 and below will recognize when using @font-face.

SVG

Scalable Vector Graphics (Font). SVG is a vector re-creation of the font, which makes it much lighter in file size, and also makes it ideal for mobile use. This format is the only one allowed by version 4.1 and below of Safari for iPhone.

WOFF

Web Open Font Format. Created for use on the web, and developed by Mozilla in conjunction with other organizations, WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts.

@font-face {
  font-family: 'Fontname';
  src: url('fontname.eot');
  src: url('fontname.eot?#iefix') format('embedded-opentype'),
          url('fontname.woff') format('woff'),
          url('fontname.ttf') format('truetype'),
          url('fontname.otf') format('truetype'),
          url('fontname.svg#dineng') format('svg');
 }

When we want that all our, for example, paragraphs have been in this font-family, we need to write the follow code.

p {Fontname: 'Fontname', arial, sans-serif; }

Descriptors

Font Descriptor Values Description
font-family name It defines the font's name and it is a requirement.
src URL It defines the URL where the font will be downloaded and it is a requirement.
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
It defines how the font will be strectched. Its default value is normal and it is an optional.
font-style normal
italic
oblique
It defines how the font will be styled. Its default value is normal and it is an optional.
font-weight normal
bold
100
200
300
400
500
600
700
800
900
It defines the font's boldness. Its default value is normal and it is an optional.
unicode-range unicode-range It defines the range of unicode characters the font supports. Its default value is U+0-10FFFF and it is an optional.