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

IT技术

更新时间：2025-04-171

admin管理员组
文章数量:1405393

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

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

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.

本文标签： htmlWeirdest error with fonts not being rendered on ChromeStack Overflow

版权声明：本文标题：html - Weirdest error with fonts not being rendered on Chrome - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1744874717a2629847.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

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

What I’ve Tried

What I’ve Tried

1 Answer 1

更多相关文章

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

发表评论

推荐文章

.net - Run javascript after form submission in update panel? - Stack Overflow

mmap - Access DDR using petalinux, what is the most prominent solution - Stack Overflow

javascript - Cypress route function not detecting the network request - Stack Overflow

javascript - Read huge files in browser using FileReader (web api) - Stack Overflow

javascript - 422 (Unprocessable Entity error when submitting form with ajax - Stack Overflow

热门文章

python - Using list to find path sum of binary tree - Stack Overflow

plugins - 504502 errors plauging our site

javascript - Change font color of variable in Java script - Stack Overflow

javascript - Variable name within a loop - Stack Overflow

javascript - Why jasmine-node doesn&#39;t find my spec files? - Stack Overflow

How to add image and featured image to post by WP REST API

python - No space error while running Spark from Airflow - Stack Overflow

javascript - Prestashop autocomplete - Stack Overflow

javascript - Titanium Alloy ListView Nested Model Array of Tags - Stack Overflow

php - Data fetch and delete by ajax request

最新文章

windows设置断电重启开机后自动输入锁屏密码登录

Windows系统设置开机默认开启数字小键盘

Windows11 开机自动同步时间（开机时间不更新问题）

windows配置开机自启动软件或脚本

【Redis】Windows设置Redis为开机自启动

.net - Access Repeater values using JavaScript - Stack Overflow

plugins - Error shown for Trying to get property &#39;roles&#39; of non-object in Wordpress After Content for User Roles

javascript - npm ERR! missing script: build; - Stack Overflow

nuxt.js - $t - global i18n function does not work in nuxt composables - Stack Overflow

javascript - jQuery, change 5 items at a time - Stack Overflow

惠普OMEN 15-CE001TX 2EF91PA参数报价

苹果新款MacBook Pro 15英寸 i732GB1TBVega Pro 20参数报价

联想Y330A-PSE L参数报价

神舟战神Z7 D6 i7-12650H16GB512GBRTX4050旗舰版参数报价

神舟战神Z7 D6 i7-12650H16GB1TBRTX4050参数报价

javascript - Why jasmine-node doesn't find my spec files? - Stack Overflow

plugins - Error shown for Trying to get property 'roles' of non-object in Wordpress After Content for User Roles