fonts
fonts copied to clipboard
`unicodeRange` override is ignored in generated CSS
I am attempting to use a different font for a single character (@
) as per this MDN doc.
From what I've gathered, using the fonts.families
override in nuxt.config.ts
should do the trick:
fonts: {
families: [
{ name: "Poppins", global: true, unicodeRange: ["U+0040"], }, // "U+0040" is "@", "global: true" added for simpler debug
],
},
This does not have the desired effect, the generated CSS has its unicodeRange
(s) untouched:
the generated CSS, as seen in devtools
@font-face {
font-family: 'Poppins';
src: local("Poppins Regular Italic"), local("Poppins Italic"), url("/_fonts/pxiGyp8kv8JHgFVrJJLufntAOvWDSHFF-u9ckw3Gfrr.woff2") format(woff2);
font-display: swap;
unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Poppins';
src: local("Poppins Regular Italic"), local("Poppins Italic"), url("/_fonts/pxiGyp8kv8JHgFVrJJLucHtAOvWDSA-9u3rothwux.woff2") format(woff2);
font-display: swap;
unicode-range: 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;
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Poppins';
src: local("Poppins Regular"), local("Poppins"), url("/_fonts/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ-pZkZPLOT5s.woff2") format(woff2);
font-display: swap;
unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Poppins';
src: local("Poppins Regular"), local("Poppins"), url("/_fonts/pxiEyp8kv8JHgFVrJJfecnFHGPc-yfgPZLSZvE.woff2") format(woff2);
font-display: swap;
unicode-range: 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;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Poppins';
src: local("Poppins Regular Italic"), local("Poppins Italic"), url("/_fonts/pxiGyp8kv8JHgFVrJJLedA-lYSG1l94SN.woff") format(woff);
font-display: swap;
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Poppins';
src: local("Poppins Regular"), local("Poppins"), url("/_fonts/pxiEyp8kv8JHgFVrFJM-RHI83LiqwU.woff") format(woff);
font-display: swap;
font-weight: 400;
font-style: normal;
}
Am I misunderstanding what fonts.families[].unicodeRange
is for? It is not mentioned in the documentation unlike the other props, but the JSDoc comment ("The range of Unicode code points to be used from the font."
) suggests to me that this should work.
If this is not the intended way to handle this use case, what is?