Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

unicodeRange override is ignored in generated CSS #180

Open
danwithabox opened this issue Jun 17, 2024 · 3 comments
Open

unicodeRange override is ignored in generated CSS #180

danwithabox opened this issue Jun 17, 2024 · 3 comments
Labels
documentation Improvements or additions to documentation

Comments

@danwithabox
Copy link

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 dosubot bot added the documentation Improvements or additions to documentation label Jun 17, 2024
Copy link

dosubot bot commented Jun 17, 2024

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
Copy link
Member

qwerzl commented Jun 27, 2024

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

No branches or pull requests

2 participants