CSS @ font-face는 Firefox에서는 작동하지 않지만 Chrome 및 IE에서는 작동합니다.

다음 코드는 IE 7뿐만 아니라 Chrome 베타에서도 작동합니다. 그러나 Firefox에 문제가있는 것 같습니다. CSS 파일이 어떻게 포함되는지에 문제가 있다고 생각합니다. Firefox가 도메인 간 가져 오기에 너무 친숙하지 않다는 것을 알고 있습니다.

그러나 이것은 모두 정적 HTML 일 뿐이며 도메인 간 문제는 없습니다.

내 landing-page.html에서 CSS 가져 오기를 수행합니다.

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

main.css 내에 다음과 같은 또 다른 수입품이 있습니다.

@import url("reset.css");
@import url("style.css");
@import url("type.css");

그리고 type.css 내에서 다음 선언이 있습니다.

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

type.css와 같은 위치에 "font"라는 디렉토리가 있습니다. 이 글꼴 디렉토리에는 모든 woff / ttf / svg 파일 등이 있습니다.

나는 이것에 걸려 있습니다. Chrome 및 IE에서는 작동하지만 Firefox에서는 작동하지 않습니다 . 이것이 어떻게 가능한지? 내가 무엇을 놓치고 있습니까?

현지에서 사이트 운영file:/// )

파이어 폭스는 매우 엄격한 "파일 URI 기원"(함께 제공 file:///에 가서, 그냥 다른 브라우저처럼 행동해야하는 :) 정책이 기본적 about:config으로 필터, fileuri다음과 같은 환경 설정 토글 :

security.fileuri.strict_origin_policy

이 값을 false로 설정하면 다른 경로 수준에서 로컬 글꼴 리소스를로드 할 수 있어야합니다.

게시 된 사이트

아래 내 의견에 따라 사이트를 배포 한 후이 문제가 발생하면 문제를 자체 도메인 간 문제로 구성하는지 확인하기 위해 추가 헤더를 추가하려고 시도 할 수 있습니다. 상대 경로를 지정하기 때문에해서는 안됩니다. 그러나 어쨌든 시도해 볼 것입니다 : .htaccess 파일에서 요청되는 각 .ttf / .otf / .eot 파일에 대해 추가 헤더를 보내도록 지정하십시오.

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

솔직히 말해서, 나는 그것이 차이를 만들 것으로 기대하지는 않지만 시도해 볼 가치가 너무 간단합니다. 그렇지 않으면 base64 인코딩 을 사용하십시오. 글꼴 서체에 도 작동하지 않을 수 있습니다.

여기에 좋은 요약이 있습니다

.htaccess에 다음을 추가하는 것 외에도 (감사합니다 @Manuel)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

다음과 같이 webfont mime 유형을 .htaccess 파일에 명시 적으로 추가하려고 할 수 있습니다.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

결국 내 .htaccess 파일은 다음과 같습니다 (웹 글꼴이 모든 브라우저에서 작동하도록하는 섹션)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

나도이 문제가 있었다. 나는 여기에 답을 찾았습니다 : http://www.dynamicdrive.com/forums/showthread.php?t=63628

이것은 firefox에서 작동하는 솔루션의 예입니다. 글꼴 글꼴 CSS 에이 줄을 추가해야합니다.

src: local(font name), url("font_name.ttf");

동료가 "firefox에서는 작동하지 않지만 다른 곳에서는 작동하지 않는"글꼴 관련 문제에 대한 해결책을 찾았 기 때문에 여기에 그대로 두겠습니다.

문제는 Firefox가 font-family 선언으로 엉망이되어 결국 수정되었습니다.

body{ font-family:"MyFont" !important; }

추신 : 나는 또한 html5boilerplate을 사용하고있었습니다.

나는 같은 문제를 겪고 있었다. @ font-face 규칙을 사용하여 H1, H2 또는 어떤 스타일을 타겟팅하는지 코드를 다시 확인하십시오. font-family: 'custom-font-family' Arial, Helvetica etcFirefox를 제외한 모든 브라우저에서 제대로 표시되고 나면 코마가 누락 된 것을 발견했습니다 . 나는 코마를 추가했고 효과가있었습니다.

나는 정확히 같은 문제가 있었다. "fonts"라는 새 폴더를 만들어 wp_content에 넣었습니다. http://www.example.com/wp-content/fonts/CANDY.otf 와 같은 브라우저에서 액세스 할 수 있습니다

이전에는 fonts 폴더가 내 CSS 파일과 동일한 디렉토리에 있었고 @ font-face는 다음과 같습니다.

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

위에서 언급했듯이 Firefox에서는 작동하지 않지만 Chrome에서만 작동했습니다. 이제 절대 경로를 사용했기 때문에 작동합니다.

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Mac에서 ff4를 실행하면이 문제가 정확히 발생했습니다. 로컬 개발 서버가 실행 중이고 @ font-face 선언이 정상적으로 작동했습니다. 나는 라이브로 마이그레이션했으며 FF는 첫 번째 페이지로드에서 올바른 유형을 '플래시'하지만 더 깊게 탐색하면 서체가 브라우저 스타일 시트로 기본 설정되었습니다.

솔루션이 .htaccess에 다음 선언을 추가하는 것으로 나타났습니다.

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

통해 발견

아무도 언급하지 않은 쉬운 해결책 중 하나는 base64 인코딩을 사용하여 글꼴을 CSS 파일에 직접 포함시키는 것입니다.

fontsquirrel.com을 사용하는 경우 font-face Kit Generator에서 전문가 모드를 선택하고 아래로 스크롤 하여 CSS 옵션 에서 Base64 Encode를 선택하십시오 . 다운로드 한 Font-Kit을 플러그 앤 플레이 할 수 있습니다.

또한 하나의 HTTP 요청이 덜 필요하기 때문에 페이지로드 시간을 단축 할 수있는 이점이 있습니다.

파일 이름에 특정 문자가 포함되어 있으면 일부 글꼴에 파이어 폭스에 문제가 있음을 언급했습니다. 최근에 파일 이름이 '237D7B_0_0'인 글꼴 'Modulus'에 문제가 발생했습니다. 파일 이름에서 밑줄을 제거하고 새 파일 이름과 일치하도록 CSS를 업데이트하면이 문제가 해결되었습니다. 비슷한 문자를 가진 다른 글꼴에는이 문제가 없으므로 매우 궁금합니다. 아마 파이어 폭스의 버그 일 것입니다. 파일 이름을 영숫자 문자로 유지하는 것이 좋습니다.

이 글꼴의 경우 특히 Google Font API를 사용해야합니다.

http://code.google.com/webfonts/family?family=Droid+Sans

여전히 FontSquirrel의 키트 생성기를 사용하려면 Smiley 핵 옵션을 사용하여 로컬 글꼴 문제를 제거하십시오. 키트를 생성 한 후 생성 된 demo.html이 FireFox에서 작동하는지 확인하십시오. 나는 내기했다. 이제 서버에 업로드하십시오-FontSquirrel이 훌륭하기 때문에 작동합니다.

그러나 생성 된 키트 코드를 프로젝트에 통합하는 동안 생성 된 키트 코드를 위반 한 경우 표준 디버깅 방법을 사용하십시오 (404를 확인하고 문제를 찾을 때까지 한 줄씩 진행하십시오). WOFF는 FF에서 확실히 작동하므로 시작하기에 좋은 곳입니다.

마지막으로, 이것도 작동하지 않으면 FireFox를 업데이트하십시오. 나는 당신이 최신을 사용한다고 가정 하고이 모든 것을 썼습니다; 체크인 한 버전을 지정하지 않아서 문제가 될 수도 있습니다.

@font-face지시문 에서 로컬 소스 선언을 네 프링하십시오 .

Firefox 또는 Google Font API에는 글꼴이 로컬에 설치되어 있고 정의 된 로컬 이름과 일치하는 경우 글꼴의 변형이 사용되지 않도록하는 알려진 버그가 있습니다.

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

로컬 선언을 효과적으로 방해하려면 로컬 소스 문자열을 넌센스로 만드십시오. 이를 위해 일반적으로 허용되는 규칙은 웃는 유니 코드 문자 ( "☺") 를 사용하는 것 입니다. 왜? Paul Irish는 자신의 블로그에서 다음과 같은 훌륭한 설명을합니다.

http://paulirish.com/2010/font-face-gotchas/#smiley

로컬 파일이나 웹 서버에서 이것을 테스트하고 있습니까? 다른 디렉토리에있는 파일은 도메인 간 규칙에 대해 서로 다른 도메인으로 간주되므로 로컬로 테스트하는 경우 도메인 간 제한에 부딪 칠 수 있습니다.

그렇지 않으면 문제가 발생한 URL을 가리키는 것이 도움이 될 것입니다.

또한 CSS 구문 오류 또는 기타 오류가보고되는지 Firefox 오류 콘솔을 살펴 보는 것이 좋습니다.

또한 두 번째 @ font-face 규칙에서 font-weight : bold를 원할 것입니다.

이 문제에 직면했을 때 .htaccess 액세스 제어 원본 허용 규칙을 사용할 수 없었습니다.

대신, web.config의 IIS에서 아래 표시된 system.webServer 블록을 삽입하십시오.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

이것은 저에게 매력처럼 작용했습니다. 특정 도메인에 대한 액세스를 제한해야하는 경우 *를 도메인으로 바꾸십시오.

Firefox에서 글꼴을 올바르게 표시하는 데 동일한 문제가 발생했습니다. 여기 내가 나를 위해 일한 것으로 나타났습니다. url 속성에서 글꼴을 보유하는 디렉토리 앞에 슬래시를 추가하십시오. 내 이전과 이후 버전은 다음과 같습니다.

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

URL에서 'fonts'앞에 슬래시가 있습니까? 브라우저가 루트 디렉토리에서 시작한 다음 리소스에 액세스하도록 지시합니다. 적어도 나를 위해-문제 해결.

외부 글꼴을 가져 오려고하면 Firefox 및 기타 브라우저에서 가장 일반적인 문제 중 하나에 직면하게됩니다. 언젠가 글꼴이 Google 크롬이나 다른 브라우저 중 하나에서 잘 작동하지만 모든 브라우저에서 작동하는 것은 아닙니다.

이 유형의 오류에 대한 많은 이유가 있습니다.이 문제의 가장 큰 이유 중 하나는 이전에 정의 된 글꼴입니다. CSS 코드의 각 줄 끝에 다음과 같이 중요한 키워드를 추가해야합니다.

예:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

설명 : CSS 파일에 위의 코드를 입력하거나 여기에 코드를 입력하십시오. 위의 예에서 "Hacen Saudi Arabia"를 글꼴 모음으로 바꾸고 글꼴 디렉토리에 따라 url을 바꾸십시오.

CSS 코드 브라우저에! important를 입력하면이 섹션에 자동으로 초점을 맞추고 이전에 사용한 속성을 재정의합니다. 자세한 내용은 https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html을 참조하십시오.

404가 있다면 파이어 버그로 확인할 수 있습니까? 나는 패스에 문제가 있었고 확장자는 동일하지만 linux file.ttf는 file.TTF와 다르다는 것을 발견했으며 firefox를 제외한 모든 브라우저에서 작동했습니다.

도움이 되길 바랍니다!

이것은 폰트 페이스의 경로를 설정하는 방법에 관한 문제입니다. "/"로 경로를 시작하지 않았기 때문에 Firefox는 스타일 시트의 경로를 기반으로 글꼴을 찾으려고합니다. 따라서 기본적으로 Firefox는 "root / css / font"디렉토리에서 글꼴을 찾지 않습니다. "root / font"디렉토리 글꼴 폴더를 CSS 폴더로 이동하거나 글꼴 경로의 시작 부분에 /를 추가하여이 문제를 쉽게 해결할 수 있습니다.

이것을 시도하십시오 :

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

이 시도....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

나는 비슷한 문제가 있었다. fontsquirel 데모 페이지는 FF에서 작동했지만 모든 파일이 동일한 도메인에서 왔지만 내 페이지가 아닙니다!

스타일 시트를 절대 URL (http://example.com/style.css)과 연결하는 것으로 나타 났으므로 FF는 다른 도메인에서 온 것으로 생각했습니다. 스타일 시트 링크 href를 /style.css로 변경하면 대신 문제가 해결되었습니다.

아마도 당신의 문제는 특히 공백과 하이픈의 사용과 관련하여 명명 문제입니다.

similair 문제가 있었는데 , 옵션 을 배치 하여 수정했다고 생각했습니다. 글꼴 / 가족 이름 주위에 따옴표 ( ') 했지만 실제로는 명명 문제가 암시 적으로 해결되었습니다.

나는 CSS 사양에 대해 완전히 최신이 아니며 다른 클라이언트가 사양을 해석하는 방법에 대한 모호성이 있습니다. 또한 PostScript 명명 규칙과 관련이있는 것 같지만 틀린 경우 수정하십시오!

어쨌든 내가 지금 이해하는 것처럼, 당신의 선언은 두 가지 가능한 독특한 맛의 혼합을 사용하고 있습니다.

@font-face {
  font-family: "DroidSerif Regular";

Droid를 Sans Regular 또는 Serif Bold 와 같이 실제 가족 이름으로 간주하면 Sans 와 Serif 가 회원입니다. 와 같이 공간을 사용하여 식별자를 연결하거나 공백을 제거하고 CamelCasing을 사용합니다. familyName 및 하위 식별자의 하이픈

선언에 적용하면 다음과 같이 보입니다.

@font-face {
  font-family: "Droid Serif Regular";

또는

@font-face {
  font-family: DroidSerif-Regular;

나는 따옴표가 있거나없는 두 가지 모두 완벽하게 합법적이어야한다고 생각하지만 다양한 고객들 사이에서 성공을 거두었습니다. 어쩌면 언젠가이 /이 isseu / s에 대한 세부 정보를 알아낼 시간이 있습니다.

이 기사는 관련된 부분을 이해하는 데 도움이된다는 것을 발견했습니다. http://mathiasbynens.be/notes/unquoted-font-family

이 기사에는 PostScript에 대한 자세한 내용과 Adobe 사양 PDF에 대한 링크가 있습니다 . http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

글꼴 모음에서 따옴표와 공백을 제거하기 만하면 설정을 혼동 할 필요가 없습니다.

이

body {font-family: "DroidSerif Regular", serif; }

이된다

body {font-family: DroidSerifRegular, serif; }

제 경우에는 글꼴 스타일 코드를 삽입하는 데 문제가 생겼습니다.

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

index.html 또는 php 페이지의 헤더에 스타일 태그로 표시됩니다. 나를 위해 작동합니다!

이 때문에이 문제에 대한 Google 최고의 결과 중 하나입니다.이 문제를 해결 한 것을 추가하고 싶습니다.

글꼴의 src에서 형식 (opentype)을 제거해야했으며 Firefox에서도 작동했습니다. 그 전에 Chrome과 Safari에서 잘 작동했습니다.

코드 때문이 아니라 Firefox 구성 때문일 수 있습니다.

Tool bar Western 에서 Unicode로 시도하십시오.

View > Text Encoding > Unicode

나는 같은 문제가 있었고 내용에 메타를 추가하여 해결했습니다.

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

HTML에 유니 코드 텍스트가있는 경우 Firefox 및 Edge에서 발생합니다.

글꼴 선언에 svg를 사용해야했기 때문에 구문을 어떻게 작성했는지 모르지만 Font Squirel에는 단 하나의 글꼴로 방탄 구문 글꼴을 만드는 훌륭한 도구가 있습니다.

http://www.fontsquirrel.com/fontface/generator

font-face 태그의 경로에서 URL을 사용할 수도 있습니다. "http://domain.com"을 사용하는 경우 Firefox에서는 작동하지 않으므로 "http://www.domain.com"으로 변경하면 작동합니다.

내 문제는 Windows에서 글꼴 이름을 'font.TTF'로 지정하고 firefox에서 'font.ttf'를 예상한다는 것입니다. 리눅스에서 프로젝트를 연 후 글꼴 이름을 적절한 이름으로 변경하고 모든 것이 작동한다는 것을 알았습니다.