\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",[],666,"Variable fonts doesn't work","2025-07-22T07:58:01Z","https://github.com/nuxt/fonts/issues/666",0.7195801,{"description":3154,"labels":3155,"number":3156,"owner":3138,"repository":3139,"state":3140,"title":3157,"updated_at":3158,"url":3159,"score":3160},"As mentioned, I just ran into this issue—using inline styles to specify fonts cost me a lot of time debugging.\n\n!! not work:\n```\n\u003Cdiv style=\"{font-family: 'xxx'}\">\n```\n\nas a reminder.\n\n",[],649,"[DOC]: It is recommended to add a usage note: Inline styles will not work.","2025-06-10T06:25:32Z","https://github.com/nuxt/fonts/issues/649",0.72202325,{"description":3162,"labels":3163,"number":3164,"owner":3138,"repository":3139,"state":3140,"title":3165,"updated_at":3166,"url":3167,"score":3168},"Not sure if this is a bug or just me, but I found that when I used local fonts (put inside /public/fonts directory), and have this in my main.css\n\n```\n@theme inline {\n --font-sans: \"Roboto\", sans-serif;\n}\n```\n\nIt's not loaded. But if I do this:\n\n```\n@theme {\n --font-sans: \"Roboto\", sans-serif;\n}\n```\n\nIt works.",[],638,"Local fonts with TailwindCSS v4 not loaded if using @theme inline","2025-05-27T07:25:13Z","https://github.com/nuxt/fonts/issues/638",0.7478532,{"description":3170,"labels":3171,"number":3178,"owner":3138,"repository":3138,"state":3179,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### 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_",[3172,3175],{"name":3173,"color":3174},"3.x","29bc7f",{"name":3176,"color":3177},"pending triage","E99695",22388,"closed","Font Loading Issue in Chrome with Permissions-Policy Header Error","2023-07-30T02:43:18Z","https://github.com/nuxt/nuxt/issues/22388",0.7328538,{"description":3185,"labels":3186,"number":3190,"owner":3138,"repository":3138,"state":3179,"title":3191,"updated_at":3192,"url":3193,"score":3194},"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>",[3187],{"name":3188,"color":3189},"2.x","d4c5f9",897,"Including fonts in styles","2023-01-18T15:39:56Z","https://github.com/nuxt/nuxt/issues/897",0.7344444,{"description":3196,"labels":3197,"number":3200,"owner":3138,"repository":3138,"state":3179,"title":3201,"updated_at":3202,"url":3203,"score":3204},"### Version\n\n[v2.4.3](https://github.com/nuxt.js/releases/tag/v2.4.3)\n\n### Reproduction link\n\n[https://user-images.githubusercontent.com/4768095/52838878-ba8f9100-3126-11e9-9dea-8c6f2d98bf1d.png](https://user-images.githubusercontent.com/4768095/52838878-ba8f9100-3126-11e9-9dea-8c6f2d98bf1d.png)\n\n### Steps to reproduce\n\nHi guys,\n\nI'm using ElementUI and [custom-theme](https://element.eleme.io/#/en-US/component/custom-theme)\n\nBut I saw error with file font.\n\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8666\">#c8666\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3198,3199],{"name":3176,"color":3177},{"name":3188,"color":3189},5042,"Nuxt 2 - Can not load font (.woff) file","2023-01-22T15:33:01Z","https://github.com/nuxt/nuxt/issues/5042",0.7417788,{"description":3206,"labels":3207,"number":3215,"owner":3138,"repository":3138,"state":3179,"title":3216,"updated_at":3217,"url":3218,"score":3219},"Hello! \r\n\r\nI'm just about to implement a proper CSP setup for my site and came across https://github.com/nuxt/nuxt.js/pull/2549. This is exactly what I need except for the fact that I'm using `generate` and can not set headers.\r\n\r\nWould you folks be open for a config option to decide between headers or a similar meta element in the head?\r\n\r\nThanks a bunch! :)\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/c2499\">#c2499\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3208,3211,3214],{"name":3209,"color":3210},"enhancement","8DEF37",{"name":3212,"color":3213},"good first issue","fbca04",{"name":3188,"color":3189},2874,"Allow to enable CSP with a meta element","2023-02-06T11:25:09Z","https://github.com/nuxt/nuxt/issues/2874",0.7435477,{"description":3221,"labels":3222,"number":3225,"owner":3138,"repository":3138,"state":3179,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Version\n\n[v2.1.0](https://github.com/nuxt.js/releases/tag/v2.1.0)\n\n### Reproduction link\n\n[https://github.com/ChristianKlee/nuxt-fonts-test](https://github.com/ChristianKlee/nuxt-fonts-test)\n\n### Steps to reproduce\n\nInstall nuxt-fonts-test and switch between my master (Nuxt 2.1) and nuxt-142 (Nuxt 1.4.2) branch to see the error.\n\n### What is expected ?\n\nThe font of a NPM Module (in this example node_modules/test/Charmonman.ttf) are included and after a nuxt generate in the dist folder\n\n### What is actually happening?\n\nError Message \"SyntaxError: Invalid or unexpected token\" on nuxt and nuxt generate.\n\n### Additional comments?\n\nSince Nuxt 2.0 it isn't possible to use an NPM package as a style library with fonts. \nThe reproduction link based on create-nuxt-app with the only addition to include a global sass file and a custom NPM module \"test\" with a font.\nIf I comment line 3 of screen.scss everything runs fine, without the included font-family.\nOn all version before Nuxt 2.0 it was possible to include such a NPM module. \nBased on the release notes, I can't identify this as a feature/different implementation but maybe I overlook something.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7917\">#c7917\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3223,3224],{"name":3176,"color":3177},{"name":3188,"color":3189},4060,"SASS: tilde package reference is broken on SSR","2023-01-22T15:30:07Z","https://github.com/nuxt/nuxt/issues/4060",0.7448043,{"description":3231,"labels":3232,"number":3234,"owner":3138,"repository":3138,"state":3179,"title":3235,"updated_at":3236,"url":3237,"score":3238},"### Version:\r\n[2.8.1](https://github.com/nuxt/nuxt.js/releases/tag/v2.8.1)\r\n\r\n### Reproduction link:\r\n[https://nuxtjs.org/api/configuration-build#loaders-css-and-loaders-cssmodules](https://nuxtjs.org/api/configuration-build#loaders-css-and-loaders-cssmodules)\r\n\r\n### Steps to reproduce\r\nAdd multiple options to the cssModules loader in nuxt.config.js\r\n\r\n```\r\nbuild: {\r\n extend (config, ctx) {},\r\n loaders: {\r\n\tcssModules: {\r\n\t\tlocalIdentName: '[local]_[hash:base64:4]', //Work\r\n\t\tmodules: true, //Not work\r\n\t\thashPrefix: 'my-custom-hash' //Not work\r\n\t}\r\n }\r\n}\r\n```\r\n\r\n### What is expected ?\r\nI wanted to get a classname `\u003Cdiv class=\"my-custom-hash_local_e23d\">Element\u003C/div>`\r\n\r\n\r\n### What is actually happening?\r\nAdding and removing all of these options does not affect the result. Except localIdentName.\r\n `\u003Cdiv class=\"local_e23d\">Element\u003C/div>`\r\n\r\n\r\n\u003C!--\r\n🚨 IMPORTANT 🚨\r\n\r\nPlease use the following link to create a new issue:\r\n\r\n- 🚨 Bug report - https://bug.nuxtjs.org/ \r\n- 🙋 Feature request - https://feature.nuxtjs.org/ \r\n- 🤔 Help wanted - https://otechie.com/nuxt \r\n- ❗️ All other issues - https://cmty.nuxtjs.org/ \r\n\r\nIf your issue was not created using the app above, **it will be closed immediately**.\r\n\r\n🚨 注意事项 🚨\r\n\r\n请务必使用下述链接来创建 issue:\r\n\r\n- 🚨 Bug 提交 - https://bug.nuxtjs.org/ \r\n- 🙋 新功能提案 - https://feature.nuxtjs.org/ \r\n- 🤔 寻求帮助 - https://otechie.com/nuxt \r\n- ❗️ 其他问题 - https://cmty.nuxtjs.org/ \r\n\r\n如果 issue 不是通过上述链接进行创建, **该 issue 会被系统自动关闭**\r\n-->\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9565\">#c9565\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3233],{"name":3188,"color":3189},6142,"CSS Modules options do not work except localIdentName","2023-01-18T20:35:41Z","https://github.com/nuxt/nuxt/issues/6142",0.7467337,["Reactive",3240],{},["Set"],["ShallowReactive",3243],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQfwZAAHsbMkLI99VdTEWGJfWu0pU6g2CRATRRd2WMSs":-1},"/nuxt/fonts/673"]