GoogleChrome / GoogleChrome/lighthouse

Audit to detect @font-face that lacks a local() src

Open
#3,612 3 comments 1 reaction 0 assignees View on GitHub
feature new_audit P2
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.