I have made a simple Vue3 + Vite project and used the Inter font from fontsource with latin and latin-ext subset like this:
npm i @fontsource/inter
SCSS import:
@import '@fontsource/inter/latin.css';
@import '@fontsource/inter/latin-ext.css';
body, html {
font-family: 'Inter';
}
While this works flawlessly when served via vite, the font breaks after building with vite build. Only the characters from latin-ext subset display correctly. There are no errors in the browser, I can also see the required font files in the build directory as well as in the build log:
dist/assets/inter-latin-100-normal.61cac109.woff2 16.16 KiB
dist/assets/inter-latin-700-normal.ced2d8e0.woff2 17.37 KiB
dist/assets/inter-latin-400-normal.0364d368.woff2 16.32 KiB
dist/assets/inter-latin-300-normal.6b2cee46.woff2 16.92 KiB
dist/assets/inter-latin-200-normal.74885a0c.woff2 16.94 KiB
dist/assets/inter-latin-600-normal.048d136d.woff2 17.25 KiB
dist/assets/inter-latin-900-normal.f2db7f82.woff2 16.77 KiB
dist/assets/inter-latin-800-normal.a51ac27d.woff2 17.35 KiB
dist/assets/inter-latin-ext-100-normal.d3be20b3.woff2 19.92 KiB
dist/assets/inter-latin-ext-300-normal.34623012.woff2 21.34 KiB
dist/assets/inter-latin-500-normal.d5333670.woff2 17.14 KiB
dist/assets/inter-latin-ext-500-normal.4fba9ae6.woff2 21.81 KiB
dist/assets/inter-latin-ext-700-normal.1cc47d25.woff2 22.09 KiB
dist/assets/inter-latin-ext-400-normal.64a98f58.woff2 19.95 KiB
dist/assets/inter-latin-ext-200-normal.4336e69d.woff2 21.45 KiB
dist/assets/inter-latin-ext-600-normal.cc23fe6f.woff2 21.92 KiB
dist/assets/inter-latin-ext-900-normal.3cff82a5.woff2 21.26 KiB
dist/assets/inter-latin-ext-800-normal.b6167428.woff2 22.11 KiB
dist/assets/inter-latin-100-normal.8b9e4e8a.woff 20.74 KiB
dist/assets/inter-latin-700-normal.51df444d.woff 22.15 KiB
dist/assets/inter-latin-300-normal.48602fcd.woff 21.64 KiB
dist/assets/inter-latin-600-normal.22b2f9fb.woff 22.11 KiB
dist/assets/inter-latin-400-normal.3ea830d4.woff 20.92 KiB
dist/assets/inter-latin-900-normal.c38e95e0.woff 21.46 KiB
dist/assets/inter-latin-200-normal.3df10d85.woff 21.71 KiB
dist/assets/inter-latin-ext-100-normal.e2338738.woff 43.34 KiB
dist/assets/inter-latin-ext-300-normal.4118491a.woff 45.38 KiB
dist/assets/inter-latin-500-normal.2514f3df.woff 21.99 KiB
dist/assets/inter-latin-800-normal.d08d7178.woff 22.18 KiB
dist/assets/inter-latin-ext-500-normal.c1ea9351.woff 46.31 KiB
dist/assets/inter-latin-ext-700-normal.ab946822.woff 46.80 KiB
dist/assets/inter-latin-ext-400-normal.33bbf334.woff 43.10 KiB
dist/assets/inter-latin-ext-200-normal.ff6f9abd.woff 45.52 KiB
dist/assets/inter-latin-ext-600-normal.debf2949.woff 46.66 KiB
dist/assets/inter-latin-ext-900-normal.dbda8df9.woff 45.33 KiB
dist/assets/inter-latin-ext-800-normal.16afe65f.woff 46.82 KiB
When swapping the order of the imports, it's the opposite - all text is in Inter except the latin-ext characters. It starts working fine when I import the whole font:
@import '@fontsource/inter';
But that makes the whole fontsource thing kinda useless, since it bloats my bundle with useless font files.
I have narrowed down the issue to missing font-face registration in the built CSS file. Only fonts from the last import are present, despite all files being included in the bundle:
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 100;
src: url(./inter-latin-ext-100-normal.d3be20b3.woff2) format("woff2"), url(./inter-latin-ext-100-normal.e2338738.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 200;
src: url(./inter-latin-ext-200-normal.4336e69d.woff2) format("woff2"), url(./inter-latin-ext-200-normal.ff6f9abd.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 300;
src: url(./inter-latin-ext-300-normal.34623012.woff2) format("woff2"), url(./inter-latin-ext-300-normal.4118491a.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(./inter-latin-ext-400-normal.64a98f58.woff2) format("woff2"), url(./inter-latin-ext-400-normal.33bbf334.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(./inter-latin-ext-500-normal.4fba9ae6.woff2) format("woff2"), url(./inter-latin-ext-500-normal.c1ea9351.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(./inter-latin-ext-600-normal.cc23fe6f.woff2) format("woff2"), url(./inter-latin-ext-600-normal.debf2949.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(./inter-latin-ext-700-normal.1cc47d25.woff2) format("woff2"), url(./inter-latin-ext-700-normal.ab946822.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 800;
src: url(./inter-latin-ext-800-normal.b6167428.woff2) format("woff2"), url(./inter-latin-ext-800-normal.16afe65f.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 900;
src: url(./inter-latin-ext-900-normal.3cff82a5.woff2) format("woff2"), url(./inter-latin-ext-900-normal.dbda8df9.woff) format("woff");
}
Is this some bug in Vite, or do I need to do something more in order to achieve the same behavior as in debug builds?