How do i use font-feature-settings when the font is imported using next/font
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
I wanted to enable:
I saw this issue closed which mentioned variation-settings instead of feature-settings and was incorrectly closed: https://github.com/vercel/next.js/issues/41862
"dlig", "liga", "calt", "tnum", "zero", "ss08", "cv10", "cv06", "cv08" for inter. I saw this issue closed which mentioned variation-settings instead of feature-settings and was incorrectly closed: https://github.com/vercel/next.js/issues/41862
Answered by joulev
i replied to the github discussion, reproduced here:
I think you have to self-host fonts here, as I don't think the Inter version hosted on Google Fonts support those features. You can try it by using Google's font file directly e.g.
and you will notice that the feature doesn't work.
If you self-host the font by downloading from https://rsms.me directly, you can then use
I think you have to self-host fonts here, as I don't think the Inter version hosted on Google Fonts support those features. You can try it by using Google's font file directly e.g.
/* Taken from the CSS file returned by Google Fonts */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff)
format("woff");
font-feature-settings: "ss02";
}and you will notice that the feature doesn't work.
If you self-host the font by downloading from https://rsms.me directly, you can then use
next/font/local with [declarations](https://nextjs.org/docs/app/api-reference/components/font#declarations) to customise the @font-face declaration.const inter = localFont({
src: [...],
display: "swap",
declarations: [{ prop: "font-feature-settings", value: "ss02" }],
variable: "--sans",
});3 Replies
Asian black bearOP
@Asian black bear I wanted to enable: `"dlig", "liga", "calt", "tnum", "zero", "ss08", "cv10", "cv06", "cv08"` for inter.
I saw this issue closed which mentioned variation-settings instead of feature-settings and was incorrectly closed: https://github.com/vercel/next.js/issues/41862
i replied to the github discussion, reproduced here:
I think you have to self-host fonts here, as I don't think the Inter version hosted on Google Fonts support those features. You can try it by using Google's font file directly e.g.
and you will notice that the feature doesn't work.
If you self-host the font by downloading from https://rsms.me directly, you can then use
I think you have to self-host fonts here, as I don't think the Inter version hosted on Google Fonts support those features. You can try it by using Google's font file directly e.g.
/* Taken from the CSS file returned by Google Fonts */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff)
format("woff");
font-feature-settings: "ss02";
}and you will notice that the feature doesn't work.
If you self-host the font by downloading from https://rsms.me directly, you can then use
next/font/local with [declarations](https://nextjs.org/docs/app/api-reference/components/font#declarations) to customise the @font-face declaration.const inter = localFont({
src: [...],
display: "swap",
declarations: [{ prop: "font-feature-settings", value: "ss02" }],
variable: "--sans",
});Answer
Asian black bearOP
@joulev thanks!