I have two locally installed fonts that I'm trying to use in my project via the @font-face rule. However, when I open the project in my browser, I get the following error in the console:
Failed to load resource: the server responded with a status of 404 (Not Found)
Despite this, when I check the Computed section in DevTools, the font for my headers (Recoleta) is being rendered correctly, even though it's supposedly not loading. This is confusing—how is the font being applied if the browser isn't able to load it?
Recoleta is being applied, see bottom of this image
The bigger issue is that my second font (kind_sans), which is applied to paragraphs, is not being loaded or applied.
Verified that the file paths are correct.
Checked for case sensitivity in filenames.
Ensured the @font-face rule is properly written.
Cleared cache and tried different browsers.
Despite all this, I’m still stuck. Any insights into why this is happening and how to resolve it?
I've attached the relevant CSS and file structure for reference. Any help would be greatly appreciated!
File structure
/* RECOLETA FONT */
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-Regular.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
}
/* KINDSANS FONT */
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansThin-930828392.woff2')
format('woff2');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansLight-930828394.woff2')
format('woff2');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansSemilight-930828396.woff2')
format('woff2');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansRegular-930828398.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansMedium-930828400.woff2')
format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansSemibold-930828402.woff2')
format('woff2');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansBold-930828404.woff2')
format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansHeavy-930828406.woff2')
format('woff2');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansBlack-930828408.woff2')
format('woff2');
font-weight: 900;
font-style: normal;
}
h1,
h2,
h3 {
font-family: Recoleta, serif;
font-weight: 600;
margin-top: 0;
}
p {
margin-top: 0;
font-family: kind_sans, sans-serif;
font-weight: 400;
}
Tried using locally installed fonts but browser won't render one of them
I figured out the solution. Thank you to @KIKO Software for pointing me in the right direction. The problem was that WebStorm's built-in server sets the web server root to my main development directory (D:/Web dev/), not to my individual project folder (D:/Web dev/ practice-1).
This means when I was using:
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansRegular-930828398.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
}
The browser was looking in the wrong location. The correct path needs to include the project name because the server root is the parent directory:
@font-face {
font-family: 'kind_sans';
src: url('/practice-1/app/fonts/Kind_Sans/KindSansRegular-930828398.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
}
Now the browser correctly is correctly looking for the file at:
D:/Web dev/practice-1/app/fonts/Kind_Sans/KindSansRegular-930828398.woff2
Note: This solution works when using WebStorm's built-in server which runs on port 63342. You might see CSS linting errors about not being able to resolve the directory as the font path relative to the server vs the CSS file are different, but I'm ignorinng these as they're coming from the editor, and not affecting the actual website functionality.