Kevin Powell - Community•2y ago

Getting 404 error with font-faces even with correct file path

I've followed Kevin's tutorial on how to sefl-host fonts using @font-face (https://www.youtube.com/watch?v=zK-yy6C2Nck&list=WL&index=19) but I ran into a problem. When I declare @font-face (with 100% correct file path) I get 404 error in browser. And I'm sure file path is correct because I can Ctrl + Click on it and it takes me to that file My file/folder structure:

+---assets
|   \---fonts
|       poppins-black-webfont.woff
|       poppins-black-webfont.woff2
|       poppins-bold-webfont.woff
|       poppins-bold-webfont.woff2
|       poppins-extrabold-webfont.woff
|       poppins-extrabold-webfont.woff2
|       poppins-extralight-webfont.woff
|       poppins-extralight-webfont.woff2
|       poppins-italic-webfont.woff
|       poppins-italic-webfont.woff2
|       poppins-light-webfont.woff
|       poppins-light-webfont.woff2
|       poppins-lightitalic-webfont.woff
|       poppins-lightitalic-webfont.woff2
|       poppins-medium-webfont.woff
|       poppins-medium-webfont.woff2
|       poppins-mediumitalic-webfont.woff
|       poppins-mediumitalic-webfont.woff2
|       poppins-regular-webfont.woff
|       poppins-regular-webfont.woff2
|       poppins-semibold-webfont.woff
|       poppins-semibold-webfont.woff2
|       poppins-thin-webfont.woff
|       poppins-thin-webfont.woff2
|           
\---scss
    +---base
    |   _font-faces.scss
    |   _index.scss

+---assets
|   \---fonts
|       poppins-black-webfont.woff
|       poppins-black-webfont.woff2
|       poppins-bold-webfont.woff
|       poppins-bold-webfont.woff2
|       poppins-extrabold-webfont.woff
|       poppins-extrabold-webfont.woff2
|       poppins-extralight-webfont.woff
|       poppins-extralight-webfont.woff2
|       poppins-italic-webfont.woff
|       poppins-italic-webfont.woff2
|       poppins-light-webfont.woff
|       poppins-light-webfont.woff2
|       poppins-lightitalic-webfont.woff
|       poppins-lightitalic-webfont.woff2
|       poppins-medium-webfont.woff
|       poppins-medium-webfont.woff2
|       poppins-mediumitalic-webfont.woff
|       poppins-mediumitalic-webfont.woff2
|       poppins-regular-webfont.woff
|       poppins-regular-webfont.woff2
|       poppins-semibold-webfont.woff
|       poppins-semibold-webfont.woff2
|       poppins-thin-webfont.woff
|       poppins-thin-webfont.woff2
|           
\---scss
    +---base
    |   _font-faces.scss
    |   _index.scss

My _font-faces.scss:

@font-face {
    font-family: 'Poppins';
    font-weight: 100;
    src: url('../../assets/fonts/poppins-thin-webfont.woff2') format('woff2'),
        url('../../assets/fonts/poppins-thin-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 100;
    src: url('../../assets/fonts/poppins-thin-webfont.woff2') format('woff2'),
        url('../../assets/fonts/poppins-thin-webfont.woff') format('woff');
}

The error:

Kevin Powell

YouTube

Self-hosting fonts explained (including Google fonts) // @font-face...

Google fonts are great, but often self-hosting them is a better choice, or if you’re in parts of Europe, it might be your only choice, so in this video I take a look at the basics of how to self-host fonts. 🔗 Links ✅ Font Squirrel Webfont Generator: https://www.fontsquirrel.com/tools/webfont-generator ⌚ Timestamps 00:00 - Introduction 01:05 -...

5 Replies

Myndi•2y ago

Could be a framework issue? What framework are you using?

TenkesOP•2y ago

I'm using React I'm also using Vite, is it possible he's causing the issue?

Myndi•2y ago

I guess depending how you're bundling it. Did you try other routes? Like removing a "../", in example. Or less paths (haven't worked with React, so I don't know how it treats the routings). I know even some frameworks are able to directly take the name of the file, and you forget about the routing at all.

TenkesOP•2y ago

Wow that actually worked... 🤦‍♂️ 😂 I've been banging my head against the wall for quite some time haha Althought I don't understand why it took me to the file when I Ctrl + Click it in VS code if file path is wrong, I thought that was sign it's correct path Anyway, thanks a lot!

Myndi•2y ago

Gaming

Programming

Getting 404 error with font-faces even with correct file path