カスタムWebfontがどのブラウザにもレンダリングされていません

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:を指定しないでください。

プロパティ名は一度だけ記述する必要があります。

カンマで区切られた値のリストが続きます。