Font not loading on production build
Hey!
Recently almost finished my focus-centered clock app.
I was deploying a beta version on my domain, but came across an issue: the font file doesn't load for the icons.
I use nerdfont's webfont.css file (that I downloaded and adapted for my setup, changing the reference to the font file accordingly to
~/assets/fonts/Symbols-2048-em Nerd Font Complete.woff2).
You can see the whole code here: https://github.com/TheDogHusky/home-clock
Here is what happens:
after the build, I can see the nerdfonts webfont css being loaded in the website in a style element:
As you can see here, the src has been changed to nuxt's built stuff url _nuxt.
If I manually navigate to https://my.domain.com/_nuxt/Symbols-2048-em Nerd Font Complete.QenJOl56.woff2, I get the file.
However on the website, there is not a single web request made to load that font. Therefore, it is not there and the icons doesn't work.
Surprinsingly, I've made this setup work before on another of my project, using the same way: downloading webfont.css, renaming it to nerdfonts.css, putting it in ~/assets/css/nerdfonts.css and downloading the font to ~/assets/css/fonts/<font> while changing the path to the font in the css file.
The font works in dev, it only fails after nuxt build and running the server.
Any ideas?8 Replies
Hi @Adam. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information in the knowledge sources, here are some key points and suggestions for your issue:
1. How Nuxt Handles Assets
- Files in the
- If you need a file to be available at a static URL, you should place it in the
- In development, assets in
- If your CSS references a font using a relative path (e.g.,
- If the font is not being requested by the browser, it could be due to a path issue or the way the CSS is being injected. 3. Recommended Solution
- Move your font files to the
- Update your CSS to reference the font using an absolute path:
- This ensures the font is always available at
- The Nuxt documentation specifically recommends placing local font files in the
- Files in the
assets/ directory are processed by the build tool (Vite or webpack) and are not directly served at a static URL. Instead, they are bundled and their URLs may be rewritten (e.g., to /_nuxt/filename.hash.woff2).- If you need a file to be available at a static URL, you should place it in the
public/ directory, not assets/Nuxt Assets Documentation.
2. Font Loading in Production- In development, assets in
assets/ are served directly, which is why your font works. In production, Nuxt processes and hashes these files, and the URLs are rewritten.- If your CSS references a font using a relative path (e.g.,
url(./fonts/filename.woff2)), Nuxt will rewrite this to a hashed path under /_nuxt/.- If the font is not being requested by the browser, it could be due to a path issue or the way the CSS is being injected. 3. Recommended Solution
- Move your font files to the
public/ directory (e.g., public/fonts/Symbols-2048-em Nerd Font Complete.woff2).- Update your CSS to reference the font using an absolute path:
- This ensures the font is always available at
/fonts/... in both development and production, and avoids issues with asset hashing and rewriting.
4. Additional Notes- The Nuxt documentation specifically recommends placing local font files in the
public/ directory and referencing them with an absolute path in your CSS for reliable production buildsNuxt Styling Documentation.
If you follow this approach and update your references, your font should load correctly in production.
If you are still experiencing issues after this, please check the browser's network tab for any failed requests or MIME type errors, and ensure there are no typos in the file paths.
Let me know if you need further clarification!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@662227196814819349> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
trying out putting it in the public folder, makes sense.
Let me check the knowledge base for you again. One moment! :books:
Sorry @Adam, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
@kapa.ai
Well now there is some relevant information:
Let me check the knowledge base for you again. One moment! :books:
----------------------
The error message you’re seeing:
suggests that Nuxt (or the
See: Nuxt Styling Documentation - Fonts in
See: Nuxt Assets Documentation - @nuxt/fonts module: If you are using Nuxt UI, it automatically registers the
See: Nuxt UI Fonts Usage What you should do: 1. Move your font file to
Nuxt UI Fonts Usage ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
@nuxt/fonts module) is unable to resolve or process your font file during the build.
Key points from the knowledge sources:
- Fonts in public/: Nuxt recommends placing local font files in the public/ directory and referencing them with an absolute path in your CSS, e.g. url('/fonts/your-font.woff2'). This ensures the file is available at build and runtime, and avoids issues with asset processing or hashing.See: Nuxt Styling Documentation - Fonts in
assets/: Files in assets/ are processed by the build tool and are not available at a static URL. If you reference them with an absolute path, Nuxt may not be able to resolve them at build time, leading to the error you see.See: Nuxt Assets Documentation - @nuxt/fonts module: If you are using Nuxt UI, it automatically registers the
@nuxt/fonts module, which tries to optimize font loading. If you want to manage fonts yourself, you can disable this by setting ui.fonts: false in your nuxt.config.ts and handle font loading manually in your CSS.See: Nuxt UI Fonts Usage What you should do: 1. Move your font file to
public/fonts/ (not assets/).
2. Reference it in your CSS with an absolute path:
3. If you are using Nuxt UI and do not want automatic font handling, add this to your nuxt.config.ts:
Then manage your font loading manually in your CSS.
This approach is directly supported and recommended by the Nuxt documentation for reliable font loading in production builds. If you continue to see the error after these changes, double-check the file path and ensure the font file is present in the public/fonts/ directory at build time.
If you need to use the assets/ directory for some reason, be aware that Nuxt will process and hash the file, and you must reference it using the correct build-time path, which can be more complex and error-prone.
If you follow these steps and still encounter issues, please provide more details about your configuration.
Nuxt Styling DocumentationNuxt UI Fonts Usage ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@662227196814819349> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Hold on
just saw in nuxt fonts's docs that if it tries to process it, logically, i should add it to my lnuxt config
well adding it gives still some issues:
On prod, it now works, but not on dev anymore
also had to specify the /fonts/ prefix in the configuration of nuxt-fonts
well for now removed the assets prefix, I get some warnings but it works both on prod and dev