When using CSS @font-face, in what order do browsers use the different types?

9
votes

When using @font-face in CSS is it documented anywhere what font types work in each the major browsers and also the priority they give to different font types if one or more is missing? I tried and failed to Google the answer.

@font-face {
    font-family: 'myfont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

Hoping for a like something like ...

Formats allowed in order of preference:

  • IE10: TTF, EOT, WOFF
  • IE9: EOT, WOFF
  • IE8: ...
  • Chrome: ...
  • Mobile Chrome: ...
  • FireFox: ...
  • Safari: ...
  • Mobile Safari: ...
1
htmlcssbrowserfontsfont-face

1 Answers

12
votes

The value of the src property is a prioritized list, so each browser will use the first font in the list that is in a format it supports. From CSS Fonts Module Level 3 CR, section 4.3 Font reference: the src descriptor: “Its value is a prioritized, comma-separated list of external references or locally-installed font face names. When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate. Fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list.”