@nuxt/fonts + tailwindcss - use only local cache
I'm working on a nuxt3/static-embedded with
I do see css rules generated when running
but the
tailwindcss and @nuxt/fonts and I want to use a google font but always served from /_fonts.
--- a/web/client/nuxt.config.ts
+++ b/web/client/nuxt.config.ts
@@ -25,6 +25,7 @@ export default defineNuxtConfig({
modules: [
'@nuxt/eslint',
+ '@nuxt/fonts',
'@nuxtjs/tailwindcss',
],
@@ -40,6 +41,12 @@ export default defineNuxtConfig({
},
},
+ fonts: {
+ assets: {
+ prefix: '/_fonts',
+ },
+ },
+
routeRules: {
[apiPrefixPattern]: { proxy: apiBackendURLPattern },
},
--- a/web/client/tailwind.config.ts
+++ b/web/client/tailwind.config.ts
@@ -1,3 +1,15 @@
import type { Config } from 'tailwindcss';
+import defaultTheme from 'tailwindcss/defaultTheme';
-export default <Partial<Config>>{};
+export default <Partial<Config>>{
+ theme: {
+ extend: {
+ fontFamily: {
+ sans: [
+ 'Roboto',
+ ...defaultTheme.fontFamily.sans,
+ ],
+ },
+ },
+ },
+};
--- a/web/client/nuxt.config.ts
+++ b/web/client/nuxt.config.ts
@@ -25,6 +25,7 @@ export default defineNuxtConfig({
modules: [
'@nuxt/eslint',
+ '@nuxt/fonts',
'@nuxtjs/tailwindcss',
],
@@ -40,6 +41,12 @@ export default defineNuxtConfig({
},
},
+ fonts: {
+ assets: {
+ prefix: '/_fonts',
+ },
+ },
+
routeRules: {
[apiPrefixPattern]: { proxy: apiBackendURLPattern },
},
--- a/web/client/tailwind.config.ts
+++ b/web/client/tailwind.config.ts
@@ -1,3 +1,15 @@
import type { Config } from 'tailwindcss';
+import defaultTheme from 'tailwindcss/defaultTheme';
-export default <Partial<Config>>{};
+export default <Partial<Config>>{
+ theme: {
+ extend: {
+ fontFamily: {
+ sans: [
+ 'Roboto',
+ ...defaultTheme.fontFamily.sans,
+ ],
+ },
+ },
+ },
+};
pnpm dev --host
@font-face {
font-family: 'Roboto';
src: local("Roboto Regular Italic"), local("Roboto Italic"), url("/_fonts/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk-OvPrwBHD96.woff2") format(woff2);
font-display: swap;
// ...
}
@font-face {
font-family: "Roboto Fallback: Arial";
// ...
}
...
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
tab-size: 4; /* 3 */
font-family: Roboto, "Roboto Fallback: Arial", ui-sans-serif, /* ... */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
@font-face {
font-family: 'Roboto';
src: local("Roboto Regular Italic"), local("Roboto Italic"), url("/_fonts/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk-OvPrwBHD96.woff2") format(woff2);
font-display: swap;
// ...
}
@font-face {
font-family: "Roboto Fallback: Arial";
// ...
}
...
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
tab-size: 4; /* 3 */
font-family: Roboto, "Roboto Fallback: Arial", ui-sans-serif, /* ... */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
<div>Hello, World!</div> on my index.vue doesn't get the font applied and the woff file is never downloaded.
Am I missing something?1 Reply
disabling local fallbacks solved it.
--- a/web/client/nuxt.config.ts
+++ b/web/client/nuxt.config.ts
@@ -43,6 +43,9 @@ export default defineNuxtConfig({
assets: {
prefix: '/_fonts',
},
+ experimental: {
+ disableLocalFallbacks: true,
+ },
},
routeRules: {
--- a/web/client/nuxt.config.ts
+++ b/web/client/nuxt.config.ts
@@ -43,6 +43,9 @@ export default defineNuxtConfig({
assets: {
prefix: '/_fonts',
},
+ experimental: {
+ disableLocalFallbacks: true,
+ },
},
routeRules: {