html - Weirdest error with fonts not being rendered on Chrome

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)

Console error

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.

What I’ve Tried

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

Console error

The bigger issue is that my second font (kind_sans), which is applied to paragraphs, is not being loaded or applied.

What I’ve Tried

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

Share Improve this question edited Mar 9 at 17:44 VLAZ 29.2k9 gold badges63 silver badges84 bronze badges asked Mar 9 at 8:32 Mohammed Omer 211 silver badge5 bronze badges

The 3rd @font-face deceleration references Kind sans instead of Recoleta in the src property. Perhaps that is causing the errors somehow? – oosh Commented Mar 9 at 11:03
Why not try an absolute path? So instead of '../app/fonts/Recoleta/Recoleta-SemiBold.woff2' just '/app/fonts/Recoleta/Recoleta-SemiBold.woff2'? Assuming that the root for your webserver is 'D:\Web dev\practice-1\'. – KIKO Software Commented Mar 9 at 11:20
@oosh, thank you for pointing that out, I've fixed it but still getting the same issue. – Mohammed Omer Commented Mar 9 at 16:16
@KIKO Software, tried the absolute paths as well, still the same error. – Mohammed Omer Commented Mar 9 at 16:16

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Weirdest error with fonts not being rendered on Chrome - Stack Overflow

What I’ve Tried

What I’ve Tried

1 Answer 1

与本文相关的文章

评论列表(0)