The no-inline-fonts plugin appended a second rule for fonts on top of Docusaurus's url-loader rule. webpack ran both: the loader emitted the real woff2 under assets/fonts/, then the asset/resource pass emitted the loader's JS module source as the file the CSS points at — a 127-byte stub, so every vendored font (Grenze Gotisch included) fell back to system faces in production. Rewrite the existing font rule in place instead of adding a competing one.
- commit
- 65e8bfd6ee7c4e4bebac010c6d9d85ab4671e684
- parent
- 079104107dc7b8864d48861bc4b9e14216ebe001
- author
- Dami <dami.etoile@gmail.com>
| M | website/ | 22 | +++++++++++++++++----- |
@@ -25,14 +25,26 @@ try {
2525 2626 // Fonts must ship as files, not base64 in the render-blocking stylesheet —2727 // webpack's default inline threshold would bloat styles.css by hundreds of KB.28+// Rewrites Docusaurus's own font rule in place: appending a second rule makes29+// webpack run both, and the asset/resource pass emits the url-loader's JS30+// module source as the .woff2 the CSS points at — a 127-byte stub, no font.2831 function noInlineFontsPlugin() {2932 return {3033 name: "lofi-no-inline-fonts",31- configureWebpack: () => ({32- module: {33- rules: [{ test: /\.(?:woff2?|eot|ttf|otf)$/i, type: "asset/resource" }],34- },35- }),34+ configureWebpack: (config: { module?: { rules?: unknown[] } }) => {35+ for (const rule of config.module?.rules ?? []) {36+ if (37+ rule && typeof rule === "object" && "test" in rule &&38+ rule.test instanceof RegExp && rule.test.test("x.woff2")39+ ) {40+ const fontRule = rule as Record<string, unknown>;41+ delete fontRule.use;42+ fontRule.type = "asset/resource";43+ fontRule.generator = { filename: "assets/fonts/[name]-[hash][ext]" };44+ }45+ }46+ return {};47+ },3648 };3749 }3850