다운로드 한 글꼴을 해독하지 못했습니다


149

이것은 Chrome에서 발생하는 오류이며 불행히도 검색하면 많은 결과를 얻지 못했습니다. 글꼴 자체가 올바르게 나타납니다. 그러나 여전히이 오류 / 경고가 나타납니다. 보다 구체적으로 이것은 전체 경고입니다.

"다운로드 한 글꼴을 해독하지 못했습니다 : http : // localhost : 8000 / app / fonts / Lato / "

내 CSS는 다음과 같습니다.

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

나는 단지 이해하지 못한다. 글꼴이 올바르게 적용되지만 항상 경고가 표시됩니다. 사용하려고 Sans-Serif하면 글꼴이 일반 브라우저 글꼴로 되돌아갑니다. 그래도 확실하지 않으며 검색 후에도 아무것도 찾지 못했습니다. 감사!

편집하다

같은 패밀리의 다양한 글꼴 파일이 있습니다. 나는 그들을 모두로드하려고합니다. 글꼴 파일은 .ttf입니다. 나는 로컬 폴더에서 그들을로드하고, 다양한 글꼴 파일과 같은,있다 Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttf


2
URL에서 슬래시가 왜 필요한가요? 디렉토리에서 모든 파일을로드하려고합니까? 아니면 실제로 단일 글꼴 파일로 리디렉션입니까?
Álvaro González

@ ÁlvaroG.Vicario 안녕하세요, 시간 내 주셔서 감사합니다. 질문을보다 명확하게하기 위해 편집했습니다.
Luís Ferreira

답변:


101

CSS 규칙에서 파일의 확장자를 추가해야합니다. 가능한 가장 깊은 지원을 제공하는이 예는 다음과 같습니다.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

편집하다:

"다운로드 한 글꼴을 디코딩하지 못했습니다"는 글꼴이 손상되었거나 불완전하다는 것을 의미합니다 (메트릭, 필요한 테이블, 이름 지정 레코드, 가능한 수백만 가지 누락).

때때로이 문제는 글꼴 자체에 의해 발생합니다. Google 글꼴은 올바른 글꼴을 제공하지만 글꼴이 필요한 경우 Transfonter 를 사용 하여 모든 글꼴 형식을 생성합니다.

때때로 FTP 클라이언트가 파일을 손상 시켰습니다 (이 경우 로컬 PC에 있기 때문에). ASCII가 아닌 바이너리로 파일을 전송하십시오.


명확하게하기 위해 질문을 편집했습니다. 게시 한 내용이 변경되는지 확실하지 않습니다. 혼란을 드려 죄송합니다. 시간 내 주셔서 감사합니다.
Luís Ferreira

1
반드시 @font face를 사용해야합니까? Lato는 Google 글꼴로 제공됩니다. 어쨌든 당신이 시도 할 수 있습니다 : font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url('../font/file for regular font.wof') format('wof');이 코드를 글꼴, 보통, 굵게 등 모든 유형의 ...
제르 마노 Plebani

1
Google 글꼴 옵션을 사용하여 정상적으로 작동합니다. 감사. 나는 당신의 대답을 받아 들였습니다.
Luís Ferreira

9
이 질문에는 '다운로드 한 글꼴을 디코딩하지 못했습니다'라는 레이블이 붙어 있습니다. 대답은 상황에 따라 다르며 실제로 오류의 의미를 나타내지는 않습니다.
Krii

24

Visual Studio에서 비슷한 문제가 발생하여 잘못된 것으로 인해 발생했습니다. url() 글꼴 문제 문제의 글꼴 경로가 되었습니다.

변경 한 후이 오류가 발생하는 것을 멈췄습니다 (예 :).

@@font-face{
    font-family: "Example Font";
    src: url("/Fonts/ExampleFont.eot?#iefix");

이에:

@@font-face{
    font-family: "Example Font";
    src: url("../fonts/ExampleFont.eot?#iefix");

1
나를 위해 ./ 또는 ../는 작동하지 않았지만 / 전체를 제거하면 /assets...~에서 assets...고맙습니다!
Shereef Marzouk

21

format ( 'woff')에서 format ( 'font-woff')으로 변경하면 지금이 문제를 해결하는 데 도움이됩니다.

Germano Plebani 답변에서 약간의 변경 사항을 변경하십시오.

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('font-woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

브라우저 소스가 열 수 있는지와 유형이 무엇인지 확인하십시오


7
font-woff 형식이 잘못 되었으면 "woff"를 읽어야합니다. 이를 통해 Chrome은 woff 글꼴을 알 수없는 형식으로 간주하고 다음 최상의 형식 (아마도 woff2의 ttf)으로 건너 뜁니다.
Arthur

이 솔루션을 사용하면 다른 형식 (ttf, woff2 등)으로도 문제를 해결할 수 있습니다.
Far

5
불행히도이 답변은 잘못되었습니다. @Arthur의 말이 확실하지 않을 수도 있지만 글꼴 형식 이름을 변경하면 글꼴로 등록되지 않기 때문에 브라우저에서 글꼴을 무시합니다. 크롬 검사 도구 (F12)에서 응용 프로그램 탭으로 이동 한 다음 프레임> 상단> 글꼴로 이동합니다. 이 솔루션을 사용하면 글꼴이 제거 된 것을 볼 수 있습니다. 나는 SO에 대해 하향 투표를 거의 사용하지 않지만,이 경우 대답은 실제로 독자가 문제를 해결했다고 생각할 수 있지만 위장하기 만했기 때문에 독자를 악화시킵니다.
앙드레 C. 앤더슨

그러면 Nextjs 프로젝트에서 woff 파일을 가져 오는 문제가 해결되었습니다! 고마워요!
Thanh-Quy Nguyen

@ AndréC.Andersen은이 답변 만이 문제를 해결하고 문제를 해결하지 못한다고 말합니다 .
JohnK

12

서버가 올바른 mime / type을 사용하여 글꼴 파일을 전송하고 있는지 확인하십시오 .

최근에 일부 글꼴 마임 유형이 바닐라 파일에 없기 때문에 nginx를 사용하는 것과 동일한 문제 가 /etc/nginx/mime.types있습니다.

누락 된 MIME 유형을 필요한 위치에 다음과 같이 추가하는 문제를 해결했습니다.

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

nginx에서 mime.types 확장을 위해 이것을 확인할 수도 있습니다. 기본 nginx mime.types 파일 확장


12

type="text/css"링크 태그 를 추가 해야했습니다. 나는 그것을 다음과 같이 바꿨다.

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

에:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">

변경 한 후에 오류가 사라졌습니다.


고맙습니다, 작동합니다. 누군가 구글에서 글꼴을로드하는 경우 그냥 추가하고 type="text/css"브라우저 콘솔의 경고 메시지는 '하드'새로 고침 후 사라집니다
lewis4u

6

방금 같은 문제가 있었고 변경하여 해결했습니다.

src: url("Roboto-Medium-webfont.eot?#iefix")

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')

6

나 에게이 오류는 https를 사용하여 Google 글꼴을 참조했을 때 발생했습니다. http로 전환하면 오류가 사라졌습니다. (그리고 네, 그 원인인지 확인하기 위해 여러 번 시도했습니다)

그래서 나는 바꿨다.

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

에:

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

3
하드 글꼴을 다시로드 할 때 Google 글꼴과 동일한 오류가 발생했습니다 . 문제가 자동으로 해결되었습니다!
Maulik Gangani

1
-1 죄송합니다. 드롭 지원을 사용 해서는 안됩니다https ! 이 사이트 불안을한다 . @MaulikGangani의 관찰 작품! 귀하의 답변으로 통합 고려
Ciprian Tomoiagă

4

때때로 잘못된 FTP 방법을 사용하여 글꼴을 업로드 / 다운로드 할 때이 문제가 발생합니다. 글꼴은 ASCII가 아닌 이진 방법을 사용하여 FTP를 사용해야합니다. (여러분의 기분에 따라 반 직관적 인 느낌이들 수도 있습니다). ASCII 방법을 사용하여 글꼴 파일을 ftp하면이 오류 메시지가 표시 될 수 있습니다. 'auto'방법으로 파일을 ftp로 보내고이 오류 메시지가 표시되면 ftp for binary 방법을 시도하십시오.


3

font awesome v4.4와 동일한 문제가 발생했으며 woff2 형식을 제거하여 수정했습니다. Chrome에서만 경고가 표시되었습니다.

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

1
예! 형식 ( 'woff2')을 제거하고 경고를 제거했습니다. 감사.
duyn9uyen

3

내 경우에는 .htaccess의 잘못된 경로 파일로 인해 발생했습니다. 파일 경로의 정확성을 확인하십시오.


2

나를 위해 실수는 글꼴 파일을 업로드하기 전에 FTP를 바이너리 모드로 설정하는 것을 잊어 버렸습니다.

편집하다

이미지와 같은 다른 유형의 이진 데이터를 업로드하여이를 테스트 할 수 있습니다. 또한 표시되지 않으면 이것이 문제 일 수 있습니다.


이것에 대한 또 다른 용어가 있습니까? FTP 클라이언트 중 하나에서 해당 옵션을 찾을 수 없습니다.
육종

* nix 명령 줄 브라우저의 BIN 및 ASCII 용어 만 알고 있습니다. 현대의 많은 FTP 클라이언트가 어떤 파일이 바이너리인지 아닌지를 알고 있다고 가정하므로 문제가 아닐 수도 있습니다. FTP 클라이언트가 이진 모드로 전송 중인지 테스트하려면 FTP를 사용하여 .jpg와 같은 이진 데이터를 이동 한 다음 확인하십시오. ASCII 모드로 전송 된 경우 표시되지 않습니다. ( jscape.com/blog/… 참조 )
Robert Gowland

아, 설명해 주셔서 감사합니다. 내가 업로드하는 모든 이미지가 훌륭합니다. 결국 FileZilla에서 이진 모드를 찾았습니다. 불행히도 나에게 도움이되지 않았습니다. 바이너리에 대한 PHP Storm에서 옵션을 찾을 수 없지만 이미지가 훌륭하다고 말 했으므로 이것이 내가 가진 문제가 아니라고 생각합니다.
육종

1

나는 또한 같은 문제가 있었지만 모든 .ttf 파일의 응답 헤더에 'Content-Type': 'application / x-font-ttf'를 추가하여 해결했습니다.


1
이 작업을 수행하는 방법?
Baim 틀린

1

필자의 경우 글꼴 파일 추가를 포괄하는 SVN 패치 파일을 생성했기 때문입니다. 이렇게 :

  1. 로컬 파일 시스템에서 하위 버전 트렁크로 글꼴 파일 추가
  2. 트렁크가 예상대로 작동
  3. 폰트 파일 추가를 포함하기 위해 트렁크 변경의 SVN 패치 생성
  4. 다른 지점에 패치 적용
  5. 글꼴 파일이 하위 버전 분기에 추가되고 커밋 될 수 있지만 손상되어 OP에 오류가 발생합니다.

해결책은 로컬 파일 시스템에서 글꼴 파일을 지점으로 직접 업로드하는 것이 었습니다. SVN 패치 파일은 모든 것을 ASCII 형식으로 변환해야하며 글꼴 파일의 바이너리를 반드시 보유 할 필요는 없기 때문에 이것이 발생했다고 가정합니다. 그러나 그것은 단지 추측 일뿐입니다.


1

제 경우에는 Gatsby와 함께 React를 사용하여 모든 경로를 다시 확인하여 문제를 해결했습니다. Sass와 함께 React / Gatsby를 사용하고 있었고 Gatsby 소스 파일은 컴파일 된 파일과 다른 곳에서 글꼴을 찾고있었습니다. 파일을 각 경로에 복제하면이 문제가 사라졌습니다.


1

필자의 경우 템플릿을 다운로드 할 때 글꼴 파일은 빈 파일이었습니다. 다운로드에 문제가있을 수 있습니다. Chrome에서 이와 관련된 일반적인 오류를 표시했습니다. 나는에서 변화의 첫 번째 해결책에 생각 wofffont-woff그것을 해결하지만, 그것은 단지 크롬 글꼴을 무시했다. 내 해결책은 글꼴을 하나씩 찾아서 다운로드 / 교체하는 것이 었습니다.


0

express를 사용하는 경우 다음과 같이 추가하여 정적 컨텐츠를 제공 할 수 있어야합니다. var server = express (); server.use (express.static ( './ public')); // 여기서 public은 app 루트 폴더이며 글꼴이 포함 된 글꼴은 모든 수준 (예 : public / fonts 또는 public / dist / fonts)입니다. // connect를 사용하는 경우 비슷한 구성을 위해 google.


0

.Net Framework 4.5 / IIS 7을 사용합니다.

이 문제를 해결하기 위해 Web.config 파일을 글꼴 파일이있는 폴더에 넣습니다.

Web.config의 내용 :

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>


0

로컬 호스트가 아닌 서버에있는 경우 FTP 클라이언트 (예 : FileZilla)가 파일을 손상시켜 문제를 일으킬 수 있으므로 글꼴을 수동으로 업로드하십시오. 나를 위해 Cpanel 인터페이스를 사용하여 수동으로 업로드했습니다.


0

내 경우는 비슷해 보이지만 글꼴이 손상되어 해독 할 수 없습니다. maven의 구성으로 인해 발생했습니다. 글꼴 확장을 위해 nonFilteredFileExtension을 추가하면 maven-resources-plugin도움이되었습니다.

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.