Replies: 1 comment
-
Well this seems to be the issue. It's something to do with your configuration or how you're using the fonts. We only just provide the CSS and relevant font files. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I am trying to use Inter font in a react app.
In my index.jsx I import it using import "@fontsource/inter";
This causes the inter-latin-400-normal.{cachebusting}.woff2 to load correctly (I get 304 as there is a rewrite rule applied).
The problem is that in the browser console I see 2 additional network requests both failing:
inter-lating-400-normal.woff2
inter-all-400-normal.woff
These are failing as they are not using the expected patch (controlled by webpack bundling) and they are not using the cache busting.
I had the same issue with poppins but I resolved it including an additional CSS file:
import "@fontsource/poppins";
import "@fontsource/poppins/500.css";
I noticed that manually configuring the font with the correct source and providing a different name, say for example "MyInter" instead of "Inter" is also solving the problem.
For example using:
@font-face {
font-family: 'MyInter';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url('./my_path_to/files/inter-latin-400-normal.woff2') format('woff2'), url('./my_path_to/files/inter-all-400-normal.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Any Advice?
Beta Was this translation helpful? Give feedback.
All reactions