Nuxt•14mo 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
```
```
public/fonts
```
stylesheet in
```
src/assets/css
```
```
src/assets/css
```

stylesheet refrenced in

src/layouts/default.vue

src/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.

kapa.ai•11/1/24, 12:31 PM

Hi @Dante. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•11/1/24, 12:31 PM

----------------------
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.

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.
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.
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>):

Make sure you've defined your font correctly in your stylesheet.

Referencing the Stylesheet:
You mentioned referencing the stylesheet in
```
src/layouts/default.vue
```
```
src/layouts/default.vue
```
. However, for global styles, it's recommended to use the 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
```
```
nuxt.config.ts
```
:

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

kapa.ai•11/1/24, 12:31 PM

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 declaration, like this:

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

----------------------

kapa.ai•11/1/24, 12:31 PM

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

DDante Good day everyone, I have been trying out Nuxt and while I was trying to use cus...

Dami Sparks (psn sparksinferno)•11/1/24, 12:56 PM

@Dante It seem your repo is private.
The font you want is not available via using
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.

DDami Sparks (psn sparksinferno)@Dante It seem your repo is private. The font you want is not available via usin...

DanteOP•11/1/24, 1:52 PM

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•11/1/24, 5:42 PM

I continued on and from what I can gather, nuxt is having issues with items in my public folder

I added some images in amd is tells me the files don't exist

DDante I continued on and from what I can gather, nuxt is having issues with items in ...

Dami Sparks (psn sparksinferno)•11/5/24, 9:35 AM

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?

DDami Sparks (psn sparksinferno)Since we do not have an oversight on how your project is setup, it is almost imp...

DanteOP•11/5/24, 9:39 AM

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•11/5/24, 1:06 PM

I notice you have a 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.

TTackleberry I notice you have a `srcDir: "src/"` set in your nuxt.config. If I interpret the...

Dami Sparks (psn sparksinferno)•11/8/24, 1:26 PM

@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•11/8/24, 1:33 PM

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

TTackleberry I notice you have a `srcDir: "src/"` set in your nuxt.config. If I interpret the...

DanteOP•11/9/24, 12:01 PM

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..

Ddanielroe in future.compatibilityVersion: 4 this will be different (namely, it will be the...

DanteOP•11/9/24, 12:02 PM

Alright, I think I will do that instead, thank you

DDante That makes no sense to me though... Shouldn't public always be a top-level direc...

Tackleberry•11/9/24, 3:07 PM

It's all answered in the link to the doc section i posted

Tackleberry•11/9/24, 3:13 PM

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

Tackleberry•11/9/24, 3:13 PM

You changed the src dir in your config, so public is no longer at the root dir

TTackleberry It's all answered in the link to the doc section i posted

DanteOP•11/9/24, 3:31 PM

It did thank you

TTackleberry I don't know what starter you used or what you changed, but nuxt 3 has the root ...

DanteOP•11/9/24, 3:34 PM

No starter, a blank project so I could learn piece by piece