Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

이미지 등 정적 자원 다루기 | Bundling Fundamentals#299

Discussion options

이미지 등 정적 자원 다루기 | Bundling Fundamentals

프론트엔드 번들링의 모든 것

https://frontend-fundamentals.com/bundling/webpack-tutorial/assets.html

You must be logged in to vote

Replies: 1 comment 1 reply

Comment options

본문에서 알려준 대로@font-face 작성했더니 아래 에러가 발생했습니다.

Failed to decode downloaded font

아래처럼 코드 변경해서 해결했습니다.
무슨 차이인지 검색해도 뜨지 않아서 왜 되는지는 모르겠습니다.

@font-face {  font-family: 'Inter';  src: url('./assets/Inter-Regular.woff2') format('font-woff2');  <-- woff2를 font-woff2로 변경}
You must be logged in to vote
1 reply
@HojinAngiscus
Comment options

저도 동일한 에러가 발생해서 자세히 살펴보았는데
다음과 같은 warning message 2개가 발생했습니다.

Failed to decode downloaded font: file://{file 경로}
OTS parsing error: invalid sfntVersion: 1008813135

실제로 제공된 예제의Inter-Regular.woff2 파일을 살펴보면 올바른 woff2 파일이 아닌 html 문서임을 확인할 수 있습니다. 그래서 이 에러의 경우는 올바르지 않은 폰트 파일로 인한 파싱 에러로 보이네요.

따라서 올바른 폰트 사용을 위해서다음 링크에서 다운로드 받아 사용하면 됩니다!

추가로 예제의 index.html에서 link로 제공된폰트 링크와 동일한 폰트 사용을 위해서는 weight 500에 해당되는Inter-Medium.woff2를 사용해야할 것으로 보입니다.


추가로@SeongjaeHong 님께서 적어주신 'woff2' -> 'font-woff2'로 변경하는 방법을 통해 warning message를 우회하는 방법은 단순히 브라우저가 해당 폰트 파일에 대한 파싱을 스킵하기에 발생하지 않는 것으로 보입니다.
이후 독자 분들께 도움이 될까해서 답글 남겨봅니다 :)

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Labels
None yet
2 participants
@SeongjaeHong@HojinAn

[8]ページ先頭

©2009-2025 Movatter.jp