개발자
React 프로젝트이며, 웹폰트로 나눔스퀘어네오 cdn방식으로 가져오고 있습니다. 맥에서는 잘 적용되는데, 윈도우 크롬 콘솔에 에러 뜨고 네트워크탭 - 폰트 확인 시 404가 뜨는데, 혹시 저와 같은 현상인 분 있으신가요?? 콘솔 에러 OTS parsing error: Unable to instantiate font face from font data. ``` @font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff') format('woff'); font-weight: normal; font-style: normal; } ``` 나눔스퀘어네오 폰트 https://noonnu.cc/font_page/1053
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 07월 25일
현재 문제를 확인해보면, 404 에러는 일반적으로 주어진 URL에 해당하는 리소스가 존재하지 않을 때 발생합니다. 이 경우, 폰트 파일의 URL이 정확한지 확인해봐야 합니다. 그런데 URL 자체는 맞아 보입니다. 그러므로 가능성은 두 가지입니다: 1) jsdelivr 서버에 잠시 문제가 있었을 수 있습니다. 이럴 경우, 일시적인 현상일 수 있으니 나중에 다시 시도해보세요. 2) 아래와 같이 CDN 대신에 사용하시는 서버에 폰트 파일들을 업로드하고 커스텀 폰트를 선언하는 방법도 있습니다. 다음과 같은 방식으로 해결해 볼 수 있습니다. ``` @font-face { font-family: 'NanumSquareNeo-Variable'; src: url('/path-to-your-font/NanumSquareNeo-Variable.woff2') format('woff2'), url('/path-to-your-font/NanumSquareNeo-Variable.woff') format('woff'); font-weight: normal; font-style: normal; } ``` 위의 '/path-to-your-font/' 부분은 실제 폰트 파일이 위치한 경로로 변경해주셔야 합니다. 그리고 Chrome에서 CORS문제도 발생할 수 있는데요, 공개적으로 접근 가능한 URL의 자원을 불러올 때 발생하는 보안 문제입니다. 이는 서버 설정을 통해 해결 가능합니다. 하지만 이 부분까지는 일반적으로 웹 환경에서 발생하는 문제여서, 본인의 코드나 환경이 아닌 외부 요인일 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!