사용자 정의 웹 폰트가 어떤 브라우저에서도 렌더링되지 않습니다.

Question

내 코드를 수정하는 데 도움을주십시오. 내 사용자 정의 글꼴이 열려있는 브라우저에서 렌더링되지 않는 것 같습니다.

여기 내 CSS 코드입니다.

@font-face{ 
font-family: 'Guildford'; 
src: url('../fonts/guildford_pro_titling-webfont.woff') format('woff'), 
src: url('../fonts/guildford_pro_titling-webfont.woff2') format('woff2'), 
src: url('../fonts/guildford_pro_titling-webfont.eot') format(embedded-opentype), 
src: url('../fonts/guildford_pro_titling.otf') format('opentype') !Important;} 

body { 
font-family: 'Guildford', sans-serif; 
background-image: url(../img/staropaquebackground.png); 
background-size: cover; 
background-attachment: fixed; 
background-repeat: no-repeat; 
color: #ffffff;} 

Answer 1

이 시도 : 선언 :

@font-face{ 
font-family: 'Guildford'; 
src: url('../fonts/guildford_pro_titling-webfont.woff') format('woff'), 
url('../fonts/guildford_pro_titling-webfont.woff2') format('woff2'), 
url('../fonts/guildford_pro_titling-webfont.eot') format(embedded-opentype), 
url('../fonts/guildford_pro_titling.otf') format('opentype') !important; 
} 

body { 
font-family: 'Guildford', sans-serif; 
background-image: url(../img/staropaquebackground.png); 
background-size: cover; 
background-attachment: fixed; 
background-repeat: no-repeat; 
color: #ffffff; 
} 

당신은 기본적으로 세미콜론 쉼표를 교체하고 여러 'SRC'을 제거해야합니다. 앞으로 이러한 문제가 발생하지 않도록 코드 유효성 검사 기능이있는 코드 편집기를 사용하는 것이 좋습니다.

Answer 2

당신은 used a validator 당신이 경우 뽑힐 것이다 오류가 있습니다. the example on MDN에서

봐 :

@font-face { 
font-family: "Open Sans"; 
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), 
     url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); 
} 

모든 URL 전에 src:를 지정하지 마십시오.

속성 이름은 한 번만 언급해야합니다.

그런 다음 쉼표로 구분 된 값 목록이옵니다.