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:
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.”
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With