GoogleChrome / GoogleChrome/lighthouse
Audit to detect @font-face that lacks a local() src
- Dominant language
- JavaScript
- Stars
- 30.8k
- Forks
- 9.8k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 19
Description
One of the anti-patterns that I frequently see is the use of `@font-face` definitions that only have [`src:` properties](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) that point to `url()`s, with no preference given to `local()` font names.
To give an example of CSS `@font-face` declaration that do things right, here's an excerpt of what Google Fonts serves for the [Nobile font](https://fonts.googleapis.com/css?family=Nobile):
```css
@font-face {
font-family: 'Nobile';
font-style: normal;
font-weight: 400;
src: local('Nobile'), local('Nobile-Regular'), url(https://fonts.gstatic.com/s/nobile/v9/WH28jv8GQ7B6kuGIskeLa3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
```
On the off chance that the user has Nobile installed on their device, the `local('Nobile'), local('Nobile-Regular'),` entries will give preference to that copy, and the network request is avoided.
An example of a CSS `@font-face` declaration that should fail the audit would be the same thing, if it lacked those `local()` entries:
```css
@font-face {
font-family: 'Nobile';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/nobile/v9/WH28jv8GQ7B6kuGIskeLa3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
```
I'm not aware of any cases where using `local()` would be a *bad* idea (and Google Fonts seems fine with always doing it), so it seems like a safe recommendation to make.
Contributor guide
Assessment
This issue has not been assessed yet.