Understanding various format values is not crucial - many of them stem from past experimental browser implementations.
You can draw parallels between format values and CSS browser prefixes – they were once important, but their relevance has diminished over time.
In summary: prioritize WOFF2 and WOFF
WOFF and WOFF2 serve as container formats that wrap opentype font files in a more compressed manner, leading to quicker loading speeds.
History of WOFF/WOFF2 Implementation
For context on browser support and implementation history (with a focus on Microsoft browsers like ie or Edge):
- woff(v1): Standardized around 2010 and adopted by major browsers by 2011, including ie9.
- woff2: While documentation may be unclear, major browser support for woff2 was fairly complete by 2016. This coincided with the discontinuation of Internet Explorer 11 and the lag in Safari support due to OSX updates.
When declaring fonts in your @font-face rule, prioritize woff2 by placing its URL at the top of the stack:
Less effective: browsers may default to loading 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');
}
Optimal: prioritize woff2 through stacking order
@font-face {
font-family: 'Example';
src: url('Example.woff2') format('woff2'),
url('Example.woff') format('woff'),
url('Example.ttf') format('truetype');
}
Remember to separate multiple font file URLs with commas and end the src property with a semicolon, unless it's the last property in the rule.
Most modern browsers support woff2, rendering older formats unnecessary.
Exploring Other Formats
Referencing the initial @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');
}
.otf format('opentype')
The .otf format, while available, is less relevant in web contexts. It's commonly used in desktop applications.
In font terminology, OTF is often associated with "post-script flavored" OpenType fonts (utilizing CFF or CFF2 outlines).
.otf lacks the compression capabilities of woff2.
.ttf format('truetype')
Truetype fonts, based on the glyf format, enjoy broad support. They can also be used locally on desktop applications.
They retain relevance in scenarios like PDF conversions.
.eot format('embedded-opentype') – outdated
Exclusive to Internet Explorer, .eot is now considered obsolete. Most IE versions can also render ttf/truetype fonts.
Avoid using .eot unless necessary for legacy systems.
.svg format('svg') – outdated
Supported by select webkit browsers and Android browsers, .svg is not favored among modern browsers like Chromium/Blink based ones.
For icons, specialty tools like icomoon or fontello are more efficient than .svg font files.
Variable Fonts
Older references to variable font formats, like in this resource, are now obsolete.
Modern browsers no longer require specialized format identifiers for variable fonts.
Streamlining Your @font-face Rule
Correct format values are essential for a functional @font-face rule. Always double-check the format declarations to prevent errors.
Ensure your @font-face rule includes necessary properties like weight and style for accurate font rendering.
Optimizing Variable Font Declarations
When declaring variable fonts in @font-face, consider specifying ranges for properties like weight and stretch for better control over font variations.
@font-face {
font-family: 'Example;
font-style: normal;
font-weight: 100 1000;
font-stretch: 0% 200%;
src: url('Example.woff2') format('woff2');
}