And how to know what to use, when, and are they ever actually required?
Many Websites have examples like the following, with varying orders:
@font-face {
font-family: 'Example';
src: url('Example.eot');
src: url('Example.eot?#iefix') format('embedded-opentype'),
url('Example.woff2') format('woff2'),
url('Example.woff') format('woff'),
url('Example.ttf') format('truetype'),
url('Example.svg#svgExample') format('svg');
}
But I've also seen examples like these:
@font-face {
font-family: 'Example';
src: url('Example.woff2') format('woff');
}
@font-face {
font-family: 'Example';
src: url('Example.ttf') format('woff2-variations');
}
@font-face {
font-family: 'Example';
src: url('Example.otf');
}
Sometimes the format seems identical to the file ending, sometimes what the file ending abbreviates or partially atleast, while other times they seem to be completly random strings, or sometimes nothing if it's just one file.
It's not important to know all possible format values - a lot of them go back to formerly experimental browser implementations.
Actually, you may compare some format values to CSS browser prefixes – fortunately, they've become less relevant – unfortunately, they can still be relevant now and then.
WOFF and WOFF2 are actually container formats wrapping .otf or .ttf opentype font files (we get to it later) in a more efficiently compressed file – resulting in shorter loading times.
To give you an idea about the history of browser support/implemenation
(I use the notoriously lagging-behind/standard-defying Microsoft browsers as a benchmark: ie or Edge):
You should prefer woff2 in your @font-face src property stack by moving their url to the top:
Not ideal: most browsers will first load woff(1) instead of woff2
@font-face {
font-family: 'Example';
src: url('Example.woff') format('woff'),
url('Example.woff2') format('woff2'),
url('Example.ttf') format('truetype');
}
Better: prioritize woff2 by stacking order
@font-face {
font-family: 'Example';
src: url('Example.woff2') format('woff2'),
url('Example.woff') format('woff'),
url('Example.ttf') format('truetype');
}
Be careful: Concatenate multiple font file urls with a comma as separator. Make sure you end the src property with a semicolon (OK you can omit it if it's the last property in your CSS rule. Just don't confuse comma with semicolon within the src stack)
Frankly, all modern browsers support woff2 so you can safely remove most of the older formats.
Referring to your first @font-face example:
@font-face {
font-family: 'Example';
src: url('Example.eot');
src: url('Example.eot?#iefix') format('embedded-opentype'),
url('Example.woff2') format('woff2'),
url('Example.woff') format('woff'),
url('Example.ttf') format('truetype'),
url('Example.svg#svgExample') format('svg');
}
The .otf is actually missing – but it's quite irrelevant for web usage.
src: url("Example.otf") format("opentype");
Similar to truetype they can be installed locally and used in any desktop application.
In type foundry lingo: OTF font files are also referred to as "post-script flavored" Open Type fonts (using CFF or CFF2 outline formats).
Whereas .ttf/truetype fonts are also called "Truetype flavored" Open Type fonts.
.otf font files are lacking advanced file compression compared to woff2.
Probably the best supported font format (based on the glyf format), but not as compact as woff2 or woff.
Besides, truetype fonts can be used in desktop environments so locally installed and used in any application.
Still relevant for some use cases like pdf conversions.
Only used by Internet Explorers – but even these atrocities were capable of rendering at least ttf/truetype.
.eot is obsolete
(unless you need to maintain some embedded system running on a special window embedded system).
Only supported by webkit browsers (safari, epiphany, midori) and android browsers.
However, all these aforementioned browsers also support woff2, woff or truetype.
Most importantly, not supported by Chromium/Blink based browsers (opera, Vivaldi, Brave, Internet Explorer 13/Edge) or Firefox.
No need for .svg font files (although they can be handy as a interchange format for icon generators like icomoon or fontello)
You might encounter legacy notations like in this post: css-tricks
src: url("Example.woff2") format("woff2 supports variations"),
url("Example.woff2") format("woff2-variations");
These extra format types originate from the days, when variable font support was rather experimental.
Nowadays, they are not needed – just use the normal format identifier.
Most modern browsers, can map font files to font-families even without a specified format.
However it's still a good idea to include them.
Common mistake:
url('Example.ttf') format('ttf') /* not correct */
instead of
url('Example.ttf') format('truetype') /* correct */
@font-face {
font-family: 'Example';
src: url('Example.woff2') format('woff2'),
url('Example.woff') format('woff'),
url('Example.ttf') format('truetype');
font-weight:400;
font-style: normal;
font-stretch: 100%;
}
/* next font style: e.g bold italic condensed */
@font-face {
font-family: 'Example';
src: url('Example_boldItalicCn.woff2') format('woff2'),
url('Example_boldItalicCn.woff') format('woff'),
url('Example_boldItalicCn.ttf') format('truetype');
font-weight:700;
font-style: italic;
font-stretch: 50%;
}
In this case, font-weight and other properties contain 2 values to define a range like e.g font-weight: 100 1000.
@font-face {
font-family: 'Example;
font-style: normal;
font-weight: 100 1000;
font-stretch: 0% 200%;
src: url('Example.woff2') format('woff2');
}