75% Complete (success)

@font-face {
font-family: '...';
src: url('#') format('...');
font-weight: ;
font-style: ;

The source property (src: url() format()) tells the browser where to load the font from via the url() function, and what type of font it is via the format() function.

As with audio and video, not every browser is capable of reading and using every type/format of font. Therefore, you will need to include multiple types of fonts in order to cover support for all browsers.

Common font file-extentions and their formats are:

  • .ttf - TrueType Fonts, format('truetype')
  • .otf - OpenType Fonts, format('opentype')
  • .woff - Web Open Font Format, format('woff')
  • .woff2 -Web Open Font Format 2.0, format('woff2')
  • .svg - SVG Fonts/Shapes, format('svg')
  • .eot - Embedded OpenType Fonts