next/font/local: Allow selective preload of sources

[darthmaim]

Goals

• Allow to configure preload of fonts per file, instead of per font

Non-Goals

No response

Background

Currently either all or none of the files for a font are preloaded. Sometimes it makes sense to only preload some variants, and only load others when needed (for example italics or rarely used weights).

This is especially useful when using variables to style <b> or <i> elements.

The current workaround for this would look like this:

const font = localFont({
  src: [
    { path: './font-400.woff2', weight: '400' },
    { path: './font-700.woff2', weight: '700' },
  ],
  variable: '--font',
});

const fontOther = localFont({
  src: [
    { path: './font-400-italic.woff2', weight: '400', style: 'italic' },
    { path: './font-700-italic.woff2', weight: '700', style: 'italic' },
  ],
  variable: '--font-other',
  preload: false
});

body { font-family: var(--font); }
i {
  font-style: italic;
  font-family: var(--font-other);
}

It is required to define the font-family for the <i>-tag to use the correct font. But this can cause problems when the <i> is wrapped in a parent with a different font-family, which might have an italic variant already.

Proposal

A possible solution is to define the font like this:

const font = localFont({
  src: [
    { path: './font-400.woff2', weight: '400' },
    { path: './font-700.woff2', weight: '700' },
    { path: './font-400-italic.woff2', weight: '400', style: 'italic', preload: false },
    { path: './font-700-italic.woff2', weight: '700', style: 'italic', preload: false },
  ],
  variable: '--font',
});

This will only preload the commonly used variants, without the need to change the font-family for the others and avoiding the inheritance problem described above.

This is a small change and I have a proof of concept PR ready: canary...darthmaim:next.js:feature/font-local-src-preload

[mismosmi]

This would be really cool. We are seeing suboptimal lighthouse scores because of this.