[Font Library] Ability to use local fonts to lower CLS when loading #65779
Description
What problem does this address?
I couldn't find a way to add a fallback font-family using a system font so that it is loaded while the custom font is loaded.
@font-face {
font-family: "Inter-fallback";
size-adjust: 107.00%;
ascent-override: 90%;
src: local("Arial");
}There is an online tool that can find which system font is close enough to the custom font to reduce CLS.
What is your proposed solution?
We could use something like this :
"fontFamilies": [
{
"fontFamily": "\"Inter\", \"Inter Fallback\", sans-serif",
"name": "Inter Variable",
"slug": "primary",
"fontFace": [
{
"fontFamily": "Inter Variable",
"fontStyle": "normal",
"fontDisplay": "fallback",
"fontWeight": "100 900",
"unicodeRange": "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD",
"src": [
"file:./node_modules/@fontsource-variable/inter/files/inter-latin-wght-normal.woff2"
]
},
{
"fontFamily": "Inter Fallback",
"sizeAdjust": "107.00%",
"ascentOverride": "90%",
"src": [
"local(Arial)"
]
}
]
}
]In my case, I can't specify the font family "fontFamily": "\"Inter\", Arial, sans-serif", because I have to define the sizeAdjust and ascentOverride properties in the context of "Inter Fallback" family.