@ font-face not working

Question

이유는 모르지만 글꼴이 표시되지 않습니다. 도움 해주십시오. (CSS 폴더)

CSS : 있는 style.css :

확인

@font-face { 
font-family: Gotham; 
src: url(../fonts/gothammedium.eot); 
src: local('Gotham-Medium'), 
url(../fonts/Gotham-Medium.ttf) format('truetype'); 
} 

a { 
font-family:Gotham,Verdana,Arial; 
} 

Answer 1

두 개의 마침표 (..)는 하나의 폴더로 이동 한 다음 슬래시 뒤의 폴더를 찾습니다. 예를 들어 :

당신의 index.html을 폴더 html/files에 있고 (당신이 /fonts에 가서 다시 하나의 폴더로 이동해야하기 때문에) 글꼴이 (가) ... 괜찮습니다, html/fonts에있는 경우. index.html이 html이고 글꼴이 html/fonts 인 경우 한 마디 만 사용해야합니다.

다른 문제는 브라우저가 .eot font-files를 지원하지 않을 수 있다는 것입니다.

더 많은 코드 (웹 사이트의 라이브 버전에 대한 링크 일 수도 있음)가 없어도 나는 더 이상 당신을 도울 수 없습니다.

편집 : .eot 부분을 잊어 버렸습니다. CSS에서 .ttf 파일을 놓쳤습니다.

는 다음과 같은 시도 : 글꼴의 얼굴을 사용

@font-face { 
font-family: Gotham; 
src: url(../fonts/gothammedium.eot); 
src: url(../fonts/Gotham-Medium.ttf); 
} 

Answer 2

하지 문제가 정확히 무엇인지,하지만 다음과 같은 시도 :

1. 글꼴 파일이 존재 하는가?
2. URL 주위에 따옴표가 필요합니까?
3. CSS3-enabled browser을 사용하고 있습니까? 그들이 당신을 위해 작동하지 않는 경우 예는

Check here, 다음, 당신은 또 다른 문제

편집 : 당신은 소스에 반복 된 선언의 무리가

이 작동합니까?

@font-face { font-family: Gotham; src: url('../fonts/gothammedium.eot'); } 

a { font-family:Gotham,Verdana,Arial; } 

Answer 3

브라우저 불일치의 작은 이해를 필요로하고 웹 서버 자체에 약간의 변경이 필요할 수 있습니다. 먼저해야 할 일은 콘솔이 어떤 메시지가 생성되는지를 확인하는 것입니다. 사용 권한 문제 또는 리소스를 찾을 수 없습니까? ...?

두 번째로 각 브라우저가 다른 글꼴 유형을 예상하기 때문에 Font Squirrel을 사용하여 글꼴을 업로드 한 다음 필요한 추가 CSS와 CSS를 생성합니다. http://www.fontsquirrel.com/fontface/generator

마지막으로 FireFox 및 IE 버전에서는 글꼴이 크로스 도메인에로드되지 않습니다.

Answer 4

최근에이 문제가 발생했으며 웹 서버가 woff 파일을 제공하도록 구성되지 않았기 때문에 문제가 발생했습니다. IIS 7의 경우 사이트를 선택한 다음 MIME 유형 아이콘을 선택할 수 있습니다. .woff가 목록에 없으면 추가해야합니다.올바른 값은 나는이 같은 문제가 발생했다

File name extension: .woff 
MIME type: application/font-woff 

Answer 5

을하고 난 사람이 특별히이 문제를 해결 보지 못했다으로 내 솔루션을 공유하고자합니다.

문제는 올바른 경로를 사용하지 않는 것이 었습니다. 내 CSS는 다음과 같이보고 : 내 CSS 폴더에 내 CSS 파일에서 폰트를 참조하고 있음을

@font-face { 
font-family: 'sonhoregular'; 
src: url('fonts/vtkssonho-webfont.eot'); 
src: url('fonts/vtkssonho-webfont.eot?') format('embedded-opentype'), 
    url('fonts/vtkssonho-webfont.woff2') format('woff2'), 
    url('fonts/vtkssonho-webfont.woff') format('woff'), 
    url('fonts/vtkssonho-webfont.ttf') format('truetype'), 
    url('fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg'); 
font-weight: normal; 
font-style: normal; 

경로의 문제입니다. 우선 레벨을 올렸다가 글꼴 폴더에 올 필요가있었습니다. 이것은 지금과 같이 잘 작동합니다.

@font-face { 
font-family: 'sonhoregular'; 
src: url('../fonts/vtkssonho-webfont.eot'); 
src: url('../fonts/vtkssonho-webfont.eot?') format('embedded-opentype'), 
    url('../fonts/vtkssonho-webfont.woff2') format('woff2'), 
    url('../fonts/vtkssonho-webfont.woff') format('woff'), 
    url('../fonts/vtkssonho-webfont.ttf') format('truetype'), 
    url('../fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg'); 
font-weight: normal; 
font-style: normal; 

이 사람이 도움이되기를 바랍니다.

Answer 6

.. 연산자를 사용하면 폴더 경로가 복제되어 다음과 같이 표시됩니다. /wp-content/themes/wp-content/themes/twentysixteen/fonts/.

브라우저에서 콘솔을 사용하여이 오류를 확인하십시오.

Answer 7

나는 또한 이런 유형의 문제에 직면 해있다. 모든 솔루션을 시도한 후에이 문제에 대한 최종 해결책을 얻었습니다. 이러한 유형의 문제의 원인은 정의 된 전역 글꼴입니다. 글꼴 얼굴 @각 라인 ! 중요한 키워드를 사용하면이 문제에 대한 솔루션입니다. 이 문제의 해결을위한

전체 설명과 예제는 여기에 있습니다 : - http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Answer 8

시도가 tag.It이 나를 위해 일한 머리에 HTML을 아래에 넣어.

<title>ABC</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

Answer 9

글꼴 생성기를 사용하여 내 글꼴을 만든 후에 아랍어 클라이언트 용으로 개발 중이며 다음과 같은 문제가 있습니다. 내가 생성 해낸 글꼴이 전혀 작동하지 않았습니다.

내가 선택한 서체 언어 글리프 (사전 선택 옵션)를 사용할뿐만 아니라 선택할 필요가있는 생성자의 "고급 옵션"에 설정이 있음이 밝혀졌습니다.

이 하위 집합을 제거한 후 내 글꼴은 아랍어 문자와 함께 작동했습니다. 나는 이것이 이것이 다른 사람을 도울 수 있기를 희망합니다.

건배

Answer 10

글꼴 파일 이름/경로를 따옴표로 묶어야합니다.
예 :

url('../fonts/Gotham-Medium.ttf') 

하지

url(../fonts/Gotham-Medium.ttf) 

url("../fonts/Gotham-Medium.ttf") 

또는

또한 @FONT-FACE 일부 글꼴 파일 작동합니다.: 글꼴이 일을하고 당신이 결코 글꼴을 다운로드하지 말할 수있다 (

모든 사이트 O를 사람은 그렇지 않은