Nuxt•2mo ago

[Solved] Local Fonts Not Working

Good day everyone, I have been trying out Nuxt and while I was trying to use custom local fonts it isn't working. I have been going with the docs instructions but with no luck. I am stumped as to what I am missingz - font files in public/fonts - stylesheet in src/assets/css - stylesheet refrenced insrc/layouts/default.vue - I am using tailwind I also get this warning in the terminal

 WARN  [Vue Router warn]: No match found for location with path "/fonts/outfit-v11-latin-600.woff2"

 WARN  [Vue Router warn]: No match found for location with path "/fonts/outfit-v11-latin-600.woff2"

Here is my repo that I am working on https://github.com/Psypher1/nuxt-explore

GitHub

GitHub - Psypher1/nuxt-explore

Contribute to Psypher1/nuxt-explore development by creating an account on GitHub.

13 Replies

kapa.ai•2mo ago

Hi @Dante. 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 provided in the knowledge sources, I can offer some guidance on using local fonts in Nuxt. Let's go through the steps and see if we can identify what might be missing in your setup. 1. Font File Location: Your approach of placing font files in public/fonts is correct. As mentioned in the Assets documentation (https://nuxt.com/docs/getting-started/assets), the public/ directory is used for static assets that should be served as-is. 2. Stylesheet Location: You've placed your stylesheet in src/assets/css, which is also correct. The Assets directory documentation (https://nuxt.com/docs/guide/directory-structure/assets) confirms that stylesheets should be placed in the assets/ directory. 3. Defining the Font: In your stylesheet, you should define the font using @font-face. Here's an example from the Styling documentation (https://nuxt.com/docs/getting-started/styling#working-with-fonts):

@font-face {
  font-family: 'YourFontName';
  src: url('/fonts/YourFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YourFontName';
  src: url('/fonts/YourFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Make sure you've defined your font correctly in your stylesheet. 4. Referencing the Stylesheet: You mentioned referencing the stylesheet in src/layouts/default.vue. However, for global styles, it's recommended to use the css property in the Nuxt configuration file. As per the Styling documentation (https://nuxt.com/docs/getting-started/styling#the-css-property), you should add this to your nuxt.config.ts:

export default defineNuxtConfig({
  css: ['~/assets/css/your-stylesheet.css']
})

export default defineNuxtConfig({
  css: ['~/assets/css/your-stylesheet.css']
})

5. Using the Font: After defining and importing the font, you can use it in your styles like this:

h1 {
  font-family: 'YourFontName', sans-serif;
}

h1 {
  font-family: 'YourFontName', sans-serif;
}

If you've followed these steps and it's still not working, there might be an issue with the font file itself or how it's being referenced. You could try using the full path to the font file in your @font-face declaration, like this:

@font-face {
  font-family: 'YourFontName';
  src: url('/fonts/YourFont.woff') format('woff');
  /* other properties */
}

@font-face {
  font-family: 'YourFontName';
  src: url('/fonts/YourFont.woff') format('woff');
  /* other properties */
}

If you're still having issues after checking these points, it might be helpful to create a minimal reproduction of the problem and share it, as suggested in the Getting Help documentation (https://nuxt.com/docs/community/getting-help). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@332238302457495564> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Dami Sparks (psn sparksinferno)•2mo ago

@Dante It seem your repo is private. The font you want is not available via using @nuxt/fonts https://fonts.nuxt.com

Nuxt Fonts

Nuxt Fonts: Optimized Custom Web Fonts for your Nuxt Apps

Plug-and-play custom web font optimization and configuration for Nuxt apps. Use and optimize your fonts using your favorite font source.

DanteOP•2mo ago

That's odd, I didn't make it private Here it is again https://github.com/Psypher1/nuxt-explore Not available you say? I thought I could use actual font files, like I do elsewhere? using google fonts helper to get the woff files in my project

GitHub

GitHub - Psypher1/nuxt-explore

Contribute to Psypher1/nuxt-explore development by creating an account on GitHub.

DanteOP•2mo ago

I continued on and from what I can gather, nuxt is having issues with items in my public folder I added some images in public/images/ amd is tells me the files don't exist

<img src="/images/hero.png />

<img src="/images/hero.png />

Dami Sparks (psn sparksinferno)•5w ago

Since we do not have an oversight on how your project is setup, it is almost impossible to help you. Could you provide a reproduction link or repo?

DanteOP•5w ago

I did share the link, but here https://github.com/Psypher1/nuxt-explore My question is how I get files in the public to get recognised in the project

GitHub

GitHub - Psypher1/nuxt-explore

Contribute to Psypher1/nuxt-explore development by creating an account on GitHub.

Tackleberry•5w ago

I notice you have a srcDir: "src/" set in your nuxt.config. If I interpret the docs correctly, the public directory is relative to the src directory by default. However, in your repo, the public folder is at top level and not inside the src directory. Maybe try moving the public folder inside the src directory.

Dami Sparks (psn sparksinferno)•4w ago

@Dante Take a look @Tackleberry'comment. He is right. Take a look at the docs: https://nuxt.com/docs/api/nuxt-config#srcdir

Nuxt

Nuxt Configuration

Discover all the options you can use in your nuxt.config.ts file.

danielroe•4w ago

in future.compatibilityVersion: 4 this will be different (namely, it will be the way you have things set up) - I suggest you enable that, and keep your current structure

DanteOP•4w ago

That makes no sense to me though... Shouldn't public always be a top-level directory? Is there a way I can point nuxt point to where the public directory is? I just don't personally don't feel comfortable having public in the src directory.. Alright, I think I will do that instead, thank you

Tackleberry•4w ago

It's all answered in the link to the doc section i posted I don't know what starter you used or what you changed, but nuxt 3 has the root level as srcDir, so the public folder would be in the root level as well You changed the src dir in your config, so public is no longer at the root dir 😄

DanteOP•4w ago

It did thank you No starter, a blank project so I could learn piece by piece

Gaming

Programming

[Solved] Local Fonts Not Working