\n\n\u003C/details> \n\n\u003Cdetails>\u003Csummary>How it should look\u003C/summary>\n\n\u003Cimg width=\"528\" height=\"130\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/8c9016c9-cdc0-4815-90f2-876fc18d080a\" />\n\n\u003C/details> \n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-fonts-variable?file=nuxt.config.ts",[],"nuxt","fonts","open","Variable fonts doesn't work","2025-07-22T07:58:01Z","https://github.com/nuxt/fonts/issues/666",0.679764,{"description":3027,"labels":3028,"number":3029,"owner":3019,"repository":3020,"state":3021,"title":3030,"updated_at":3031,"url":3032,"score":3033},"Hello - I have the following in `nuxt.config.ts`\n\n```\nfonts: {\n families: [\n {\n name: 'My Font',\n provider: 'local',\n weights: ['200', '300', '400', '500', '600', '700', '800', '900'],\n display: 'optional',\n },\n ],\n }\n```\n\nWhen I inspect the @font-face created in the style section of my document, I can see `font-display: swap`. I'm on version `0.11.3`.",[],634,"font-display in nuxt.config.ts not respected","2025-05-21T21:17:21Z","https://github.com/nuxt/fonts/issues/634",0.7187694,{"description":3035,"labels":3036,"number":3037,"owner":3019,"repository":3020,"state":3021,"title":3038,"updated_at":3039,"url":3040,"score":3041},"Hey!\n\nBuilt an application with nuxt originally on my linux machine. I cloned the repo and started developing again on my Windows machine, but came to an issue:\nI load the Source Code Pro font through nuxt fonts with the google provider:\n```ts\nimport pkg from './package.json';\n\nexport default defineNuxtConfig({\n compatibilityDate: '2025-05-15',\n devtools: { enabled: false },\n srcDir: \"src\",\n css: [\n '~/assets/css/main.css',\n '~/assets/css/nerdfonts.css'\n ],\n modules: ['@vueuse/nuxt', '@pinia/nuxt', 'pinia-plugin-persistedstate/nuxt', '@nuxt/fonts'],\n fonts: {\n families: [\n { name: 'Source Code Pro', provider: 'google', subsets: ['latin'] },\n ]\n },\n runtimeConfig: {\n public: {\n version: pkg.version\n }\n }\n});\n```\n\nHowever, on windows, somehow, no errors pops up, just the font doesn't exist in the CSS, I can't use it:\nIt defaults to the default browser font when I only specify \"Source Code Pro\" as family to force it into trying to use it (see screenshots)\n\nAs I previously said: no errors in the console (browser) and terminal. \nThe nuxt-fonts-global.css file that is being loaded into my page is a sourceMap:\n```html\n\u003Cstyle type=\"text/css\" data-vite-dev-id=\"virtual:nuxt:D%3A%2FUtilisateurs%2FAdam%2FDocuments%2Fdev%2FTypeScript%2Fsites%2Fhome-clock%2F.nuxt%2Fnuxt-fonts-global.css\">\n/*# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoidmlydHVhbDpudXh0OkQlM0ElMkZVdGlsaXNhdGV1cnMlMkZBZGFtJTJGRG9jdW1lbnRzJTJGZGV2JTJGVHlwZVNjcmlwdCUyRnNpdGVzJTJGaG9tZS1jbG9jayUyRi5udXh0JTJGbnV4dC1mb250cy1nbG9iYWwuY3NzIiwibWFwcGluZ3MiOiIiLCJuYW1lcyI6W10sInNvdXJjZXMiOltdLCJ2ZXJzaW9uIjozfQ== */\u003C/style>\n```\nI have no idea if this is intended\nI don't know how it looks like on linux, as I haven't tested.\nTo clarify, I used an Arch Linux machine.\n\n\nHere are my versions on my current host:\nWindows 11\nNode 22.14.0\nYarn 1.22.22\nNuxt 3.17.4\nNuxt fonts 0.14.4\n\n\nAny ideas?\nHere is the repo if you want to try that for yourself: https://github.com/TheDogHusky/home-clock\n\n",[],641,"[BUG]: Font does not load in dev on Windows","2025-05-31T16:32:05Z","https://github.com/nuxt/fonts/issues/641",0.7238106,{"description":3043,"labels":3044,"number":3051,"owner":3019,"repository":3019,"state":3021,"title":3052,"updated_at":3053,"url":3054,"score":3055},"### Environment\n\nMy nuxt config:\n```\nimport tailwindcss from \"@tailwindcss/vite\";\nexport default defineNuxtConfig({\n app: {\n head: {\n charset: 'utf-8',\n viewport: 'width=device-width, initial-scale=1',\n title: 'Florian Strasser',\n htmlAttrs: {\n lang: 'de'\n },\n meta: [\n { charset: 'utf-8' },\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n { name: 'description', content: '' },\n { name: 'theme-color', content: '#0C1B14' },\n { name: 'format-detection', content: 'telephone=no' },\n { name: 'google-site-verification', content: 'rFXmUstLa2IsWqAB7pBC0erTzfV5SBDTQiBuykWbj5g' }\n ],\n link: [\n { rel: 'icon', href: '/touchicon.png' },\n { rel: 'apple-touch-icon', href: '/touchicon.png' },\n ]\n },\n pageTransition: { name: 'page', mode: 'out-in' }\n },\n compatibilityDate: '2024-12-04',\n site:{\n url: 'https://www.florian-strasser.de',\n name: 'Florian Strasser',\n trailingSlash: true,\n defaultLocale: 'de'\n },\n css: ['~/assets/css/main.css'],\n ssr: true,\n modules: [\n '@nuxt/image',\n '@nuxtjs/seo',\n '@nuxt/fonts'\n ],\n ogImage: {\n enabled: false\n },\n seoExperiments: {\n enabled: false\n },\n linkChecker: {\n enabled: false\n },\n image: {\n domains: ['directus.florian-strasser.de'],\n alias: {\n directus: 'https://directus.florian-strasser.de'\n },\n staticFilename: '[publicPath]/images/[name]-[hash][ext]'\n },\n vite: {\n plugins: [\n tailwindcss(),\n ],\n },\n})\n```\n\nMy index.vue page looks like this:\n\u003Ctemplate>\n \u003Cdiv id=\"page-content\">\n \u003CAppHeader/>\n \u003CPageContentblock v-for=\"(item, index) in posts.data[0].content\" :key=\"item.id\" :item=\"item\" v-once/>\n \u003C/div>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nconst img = useImage()\nconst { data: posts } = await useAsyncData('home', () => $fetch('https://dummyurl.to.directus'), { watch: false, deep: false, strategy: 'static' })\nvar metaData = [{ name: 'description', content: posts.value.data[0].meta_description }, { property: 'og:image', content: img('/directus/assets/' + posts.value.data[0].OG_Image,{ width: 1024, height: 576, format: 'webp'}) }]\nuseHead({\n title: posts.value.data[0].titel,\n meta: metaData\n})\n\u003C/script>\n\n### Reproduction\n\nYou can see the issue live on my production website when you open the console:\nhttps://www.florian-strasser.de\n\n### Describe the bug\n\nWhen I switched over from nuxt 2 to nuxt 3 it introduced my website to the warning:\n`The resource https://www.florian-strasser.de/_payload.json?54c17914-61aa-4ea1-86d9-735ec3e50181 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.`\n\nAt first I thought that this will be fixed during later patches, but now we are more or less before nuxt 4 and it still appears.\n\nSince the latest patches there is also another json file that has a similar warning:\n`[Warning] The resource https://www.florian-strasser.de/_nuxt/builds/meta/54c17914-61aa-4ea1-86d9-735ec3e50181.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.`\n\nThe Files are not that big as I would expect any problems - also my page speed results are pretty good so I really don't understand what could be the issue for that type of warning. When inspecting the payload json someone could argue that this is actually alot of text, but I don't see other possibilities when creating an entire page.\n\nFor the meta file I'm even more confused since is a very small file.\n\nAnyone has an idea?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3045,3048],{"name":3046,"color":3047},"pending triage","E99695",{"name":3049,"color":3050},"needs reproduction","FBCA04",30833,"[de:translated] payload.json and meta json file preloaded but not used within a few seconds","2025-03-18T22:28:42Z","https://github.com/nuxt/nuxt/issues/30833",0.72982633,{"description":3057,"labels":3058,"number":3059,"owner":3019,"repository":3020,"state":3060,"title":3061,"updated_at":3062,"url":3063,"score":3064},"Hey Daniel,\n\nhope you keeping well\n\nnot sure exaclty when this started but in last version or two - and fonts do not display. Am using latest version of Nuxt fonts. \n\n````\nRefused to apply style from 'http://localhost:3000/_nuxt/virtual:nuxt:C%3A%2FUsers%2Fskals%2FDesktop%2Fnuxt%2F.nuxt%2Fnuxt-fonts-global.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.\n````\n\nany hints?\n",[],629,"closed","refused to apply style","2025-05-17T18:04:43Z","https://github.com/nuxt/fonts/issues/629",0.6704084,{"description":3066,"labels":3067,"number":3077,"owner":3019,"repository":3019,"state":3060,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### Environment\n\n- Nuxt 3.17.2\n- Vue laetst\n- Tailwind 4.1.5\n- @nuxt/fonts 0.10.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-gqoymb5k?file=app%2Fassets%2Fcss%2Fmain.css\n\n### Describe the bug\n\nSince I recently updated some dependencies, fonts no longer load with @nuxt/fonts.\nReference to this [Discord message](https://discord.com/channels/473401852243869706/897487139888062506/1368934910798073908)\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nRefused to apply style from 'http://localhost:3000/_nuxt/virtual:nuxt:%2Fapp%2F.nuxt%2Fnuxt-fonts-global.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.\n```",[3068,3071,3072,3074],{"name":3069,"color":3070},"good first issue","fbca04",{"name":3046,"color":3047},{"name":3073,"color":3050},"🔨 p3-minor",{"name":3075,"color":3076},"possible regression","B90A42",32006,"MIME type ('application/json') is not a supported stylesheet MIME type","2025-05-19T00:40:16Z","https://github.com/nuxt/nuxt/issues/32006",0.6799161,{"description":3083,"labels":3084,"number":3088,"owner":3019,"repository":3019,"state":3060,"title":3089,"updated_at":3090,"url":3091,"score":3092},"There might be a solution for this, but I have looked through all the issues and could not find mention of this particular issue (though https://github.com/nuxt/nuxt.js/issues/872 might be relevant).\r\n\r\nIn my `assets/styles/global.scss` file I reference fonts stored at `assets/fonts/keiser`.\r\n```\r\n@font-face {\r\n font-family: \"Keiser\";\r\n src: url(\"~assets/fonts/keiser/keiser-webfont.eot\");\r\n src: url(\"~assets/fonts/keiser/keiser-webfont.eot\") format(\"embedded-opentype\"), \r\n url(\"~assets/fonts/keiser/keiser-webfont.woff\") format(\"woff\"), \r\n url(\"~assets/fonts/keiser/keiser-webfont.ttf\") format(\"truetype\");\r\n font-weight: normal;\r\n font-style: normal;\r\n}\r\n```\r\nWhich then results in this error:\r\n```\r\n error in ./assets/fonts/keiser/keiser-webfont.woff\r\n\r\nModule parse failed: D:\\Development\\Keiser\\Keiser.Metrics\\Keiser.Metrics.Web\\assets\\fonts\\keiser\\keiser-webfont.woff Unexpected character ' ' (1:8)\r\nYou may need an appropriate loader to handle this file type.\r\n(Source code omitted for this binary file)\r\n\r\n @ ./~/css-loader?sourceMap!./~/sass-loader/lib/loader.js?sourceMap!./assets/styles/global.scss 6:281-331\r\n @ ./assets/styles/global.scss\r\n @ ./~/babel-loader/lib?{\"presets\":[\"vue-app\"],\"babelrc\":false,\"cacheDirectory\":true}!./~/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue\r\n @ ./.nuxt/App.vue\r\n @ ./.nuxt/index.js\r\n @ ./.nuxt/client.js\r\n @ multi webpack-hot-middleware/client?reload=true ./.nuxt/client.js\r\n```\r\nWe would normally use [resolve-url-loader](https://github.com/bholloway/resolve-url-loader) to solve this issue. I see that there are a few ways to override loaders, but none of the ones I tried would work (and most seemed to be ignored for this file). Is there a method for overriding the loader for this file?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c767\">#c767\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3085],{"name":3086,"color":3087},"2.x","d4c5f9",897,"Including fonts in styles","2023-01-18T15:39:56Z","https://github.com/nuxt/nuxt/issues/897",0.6954457,{"description":3094,"labels":3095,"number":3100,"owner":3019,"repository":3019,"state":3060,"title":3101,"updated_at":3102,"url":3103,"score":3104},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.5.0\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: pnpm@8.6.10\r\n- Builder: vite\r\n- User Config: devtools, css\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\n1. Import a font using `@import` from Google Fonts or load a font from local files.\r\n**~/assets/css/main.css with import**\r\n\r\n```\r\n@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa&display=swap');\r\n\r\n* {\r\n /* background-color: #0E0E0E; */\r\n background-color: white;\r\n font-family: 'Lexend Exa', sans-serif !important;\r\n}\r\n```\r\n\r\n**OR ~/assets/css/main.css** with **@font-face**\r\n```\r\n@font-face {\r\n font-family: 'Lexend Exa';\r\n src: url('/fonts/LexendExa-Regular.woff2') format('woff2');\r\n}\r\n\r\n* {\r\n /* background-color: #0E0E0E; */\r\n background-color: white;\r\n font-family: 'Lexend Exa', sans-serif;\r\n}\r\n```\r\n\r\n**nuxt.config.ts** \r\n`css: [\"~/assets/css/main.css\"]`\r\n\r\n2. Assign the imported or local font to an element using the `font-family` CSS property.\r\n3. Open the project in Google Chrome and inspect the element.\r\n\r\n### Describe the bug\r\n\r\nI'm encountering an issue in my Nuxt.js project where fonts, either imported from Google Fonts or loaded from local files, aren't being applied in Google Chrome. In Chrome's Developer Tools, the `font-family` property is crossed out. Even when using `!important`, the font doesn't change. The issue does not appear in Mozilla Firefox where the font displays correctly. In addition, I'm receiving a console error in Chrome stating: `\"Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.\"`\r\n\r\n\r\n### Additional context\r\n\r\n- The issue persists irrespective of the source of the font (Google Fonts or locally hosted).\r\n- The `@import` statement for the font is placed at the top of the CSS file.\r\n- The URL for the Google Font is correctly specified and accessible.\r\n\r\nDespite numerous troubleshooting steps, the issue remains unresolved in Google Chrome. Any assistance or guidance to address this issue would be greatly appreciated.\r\n\r\n### Logs\r\n\r\n_No response_",[3096,3099],{"name":3097,"color":3098},"3.x","29bc7f",{"name":3046,"color":3047},22388,"Font Loading Issue in Chrome with Permissions-Policy Header Error","2023-07-30T02:43:18Z","https://github.com/nuxt/nuxt/issues/22388",0.69714344,{"description":3106,"labels":3107,"number":3112,"owner":3019,"repository":3019,"state":3060,"title":3113,"updated_at":3114,"url":3115,"score":3116},"Hi,\r\nI have a code:\r\n```\r\n@font-face {\r\n font-family: icomoon;\r\n src: url('/fonts/icomoon/icomoon.woff2') format('woff2');\r\n\r\n font-weight: normal;\r\n font-style: normal;\r\n}\r\n```\r\n\r\nAfter I updated Nuxt from 0.10.6 to rc5 I got an error:(before update it works)\r\n```\r\n in ./node_modules/css-loader?{\"minimize\":true,\"importLoaders\":1,\"sourceMap\":true,\"root\":\"~\",\"alias\":{\"/static\":\"D://Projects//Vue//***//src//static\",\"/assets\":\"D://Projects//Vue//***//src//assets\"}}!./node_modules/postcss-loader/lib?{\"sourceMap\":true,\"plugins\":[null,null,{\"version\":\"6.0.9\",\"plugins\":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],\"postcssPlugin\":\"postcss-cssnext\",\"postcssVersion\":\"6.0.9\"}]}!./node_modules/sass-loader/lib/loader.js?{\"sourceMap\":true}!./src/css/main.scss\r\nModule not found: Error: Can't resolve 'fonts/icomoon/icomoon.woff2' in 'D:\\Projects\\Vue\\Smart Landing\\smart-landing-client\\src\\css'\r\n @ ./node_modules/css-loader?{\"minimize\":true,\"importLoaders\":1,\"sourceMap\":true,\"root\":\"~\",\"alias\":{\"/static\":\"D://Projects//Vue//***//src//static\",\"/assets\":\"D://Projects//Vue//***//src//assets\"}}!./node_modules/postcss-loader/lib?{\"sourceMap\":true,\"plugins\":[null,null,{\"version\":\"6.0.9\",\"plugins\":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],\"postcssPlugin\":\"postcss-cssnext\",\"postcssVersion\":\"6.0.9\"}]}!./node_modules/sass-loader/lib/loader.js?{\"sourceMap\":true}!./src/css/main.scss 6:140737-140775\r\n @ ./src/css/main.scss\r\n @ ./node_modules/babel-loader/lib?{\"presets\":[\"vue-app\",\"stage-0\",\"es2015\"],\"plugins\":[\"transform-decorators-legacy\",\"transform-class-properties\"],\"babelrc\":false,\"cacheDirectory\":true}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue\r\n @ ./.nuxt/App.vue\r\n @ ./.nuxt/index.js\r\n @ ./.nuxt/client.js\r\n @ multi webpack-hot-middleware/client?name=client&reload=true ./.nuxt/client.js\r\n```\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1277\">#c1277\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3108,3111],{"name":3109,"color":3110},"available soon","6de8b0",{"name":3086,"color":3087},1435,"[css-loader] Problem with static files","2023-01-18T15:41:50Z","https://github.com/nuxt/nuxt/issues/1435",0.7029651,{"description":3118,"labels":3119,"number":3123,"owner":3019,"repository":3019,"state":3060,"title":3124,"updated_at":3125,"url":3126,"score":3127},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.11.1\r\n- Nuxt Version: 3.10.2\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: pnpm@8.15.2\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n1. Create a new Nuxt project with the `pnpm dlx nuxi@latest init \u003Cproject-name>` command.\r\n2. Start the dev server with `pnpm run dev`.\r\n3. Open the Nuxt site in Firefox, my version is: 122.0.1 (64-bit).\n\n### Describe the bug\n\nWhen you open the Nuxt site in Firefox for the first time, the console looks like this:\r\n\r\n\r\nBut when you hit F5 to refresh the page, the following errors appear in the console:\r\n\r\n\r\n`The stylesheet http://localhost:3000/_nuxt/node_modules/.pnpm/@nuxt+ui-templates@1.3.1/node_modules/@nuxt/ui-templates/dist/templates/welcome.vue?vue&type=style&index=0&scoped=5186e9ca&lang.css was not loaded because its MIME type, \"text/javascript\", is not \"text/css\".`\r\n\r\n`The stylesheet http://localhost:3000/_nuxt/node_modules/.pnpm/vite-plugin-vue-inspector@4.0.2_vite@5.1.3/node_modules/vite-plugin-vue-inspector/src/Overlay.vue?vue&type=style&index=0&scoped=75011137&lang.css was not loaded because its MIME type, \"text/javascript\", is not \"text/css\".`\r\n\r\nI don't think it breaks the dev site, but I have noticed when I hit refresh the page loads without any styling, then the styling pops in after a moment.\r\n\r\nThese errors don't appear when using other browsers like Chrome.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3120,3121,3122],{"name":3097,"color":3098},{"name":3046,"color":3047},{"name":3073,"color":3050},25879,"\"The stylesheet was not loaded because its MIME type\" error in Firefox","2025-03-03T01:28:35Z","https://github.com/nuxt/nuxt/issues/25879",0.71255076,["Reactive",3129],{},["Set"],["ShallowReactive",3132],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fXQxUcyh0hDCwQuyME4qcWOzHS0b_HaR7pcO_JeA34aI":-1},"/nuxt/fonts/626"]