unicodeRange override is ignored in generated CSS

[danwithabox]

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?

[dosubot]

Hi @danwithabox! I'm here to help you with any bugs, questions, or contributions. Let's solve this together!

Yes, you are misunderstanding what fonts.families[].unicodeRange is for in nuxt.config.ts. The unicodeRange property is used to specify the range of Unicode code points that the font should cover. This is useful for optimizing font loading by only loading the parts of the font that are needed for the characters you are using.

To use a different font for a single character, you should use CSS to apply the font to that specific character. Here is an example of how you can do this:

/* Define a class for the specific character */
.special-character {
  font-family: 'YourSpecialFont', sans-serif;
}

Then, in your HTML or Vue component, you can apply this class to the specific character:

<span class="special-character">@</span>

This way, the character "@" will use the YourSpecialFont font, while the rest of the text will use the default font ^[1].

To continue talking to Dosu, mention @dosu.

[qwerzl]

unicodeRange is intended for internal usage in the library. When we parse the CSS returned from providers, unicodeRange is replaced by the value given by the CSS, so what you define in the configuration won't be kept for rendering.

But yes, I think we should improve the type definitions for the config. There are several options intended not for configuration, but rather for internal usage.

[danwithabox]

AFAIK I cannot override unicodeRange in the CSS code that the library generates with my own CSS definitions elsewhere.

Would I have to acquire the font myself and "go around" this library for that specific font if I wanted to change just unicodeRange, or is there a more obvious, simpler solution that I'm not aware of, that would still let this library handle the loading of the font?

I'd rather be able to use a unicodeRange config instead of it just being hidden from me, while of course internal-only props should be hidden.