I’ve been using woff2 font resources in Elements and they’re generally working well, but in looking at the @font-face definitions elements produces there’s definitely room for improvement. Take the following code snippet for instance:
// an example of the font being declared
@font-face {
font-family: 'font-6DDB028D-1BA0-4B0E-B90D-6D54FB7FCD92';
src: url('resources/fonts/literata/text/bold.woff2') format('woff2');
font-weight: 600;
font-style: regular;
font-stretch: normal;
}
// an example of the font being used
.prose-article :where(p):not(:where… {
…
font-family: font-6DDB028D-1BA0-4B0E-B90D-6D54FB7FCD92;
…
}
If you refer to the MDN @font-face documentation there are a number of errors and/or bad practices in this definition.
- The font-weight specified is 600 which is incorrect for a bold font according to the font-weight documentation (it should be ‘700’ or ‘bold’). I’ve also seen regular weights defined as ‘300’, when their actual value is ‘400’.
- Only one src: ‘url’ property is defined (….woff2) with no opportunity to provide a .woff alternative for older browsers. Technically you can also provide font in .ttf and .eof formats, but those are only used in much older browsers.
- There is no ‘font-style: regular’… it’s ‘normal’.
- Also, oblique (not shown in this example, but seen in Elements @font-face definitions) isn’t equal to italic. Some fonts are designed with different character shapes for italic, whereas ‘oblique’ is often a slanting of the characters, which is a technique that is often used by browser vendors to fake an italic for typefaces that don’t provide a true italic.
- There are no fallback fonts (ie. Arial, Georgia, etc) defined in the ‘font-family’ property which means that if a font fails to load the ‘default’ typeface may or may not properly represent the intended design (ie. sans-serif instead of serif). At least being able to specify whether a font fallback is serif or sans-serif would help in this regard.
Anyway, as it stands custom web font support in Elements technically ‘works’, but I wouldn’t say it’s following best practices, and there’s still LOTS of room for improvement - especially if you want to attract professional web designers to the product.
