NuxtN
Nuxt8mo ago
16 replies
Adam

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:
<style>
@font-face{font-family:NerdFontsSymbols Nerd Font;font-style:normal;font-weight:400;src:url(/_nuxt/Symbols-2048-em Nerd Font Complete.QenJOl56.woff2) format("woff2")}.nerd-font,.nerd-fonts,.nf{font-family:NerdFontsSymbols Nerd Font;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.nf-cod-account:before{content:""}/* and so on.. */
</style>

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?
Was this page helpful?