fonts icon indicating copy to clipboard operation
fonts copied to clipboard

`unicodeRange` override is ignored in generated CSS

Open danwithabox opened this issue 8 months ago • 3 comments

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?

danwithabox avatar Jun 17 '24 21:06 danwithabox