CSS @ font-faceが動作しない、デフォルトのフォントが表示される

私のWebページでカスタムフォントを使用しようとしていますが、動作しません。どんな考え？CSS @ font-faceが動作しない、デフォルトのフォントが表示される

@font-face { 
    font-family: 'raleway'; 
    src: url("Raleway-Regular.tff") format("truetype"); 
} 

.logoarea { 
    float: left; 
} 

.logo { 
    width: 120px; 
    height: 74px; 
} 
.topnavbar { 
    font-family: 'raleway'; 
}

これは私のCSSコードです。私はすでに、ファイルのスペルが正しいことを確認しました。 cssとmyのフォントは同じディレクトリにあります。

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <!-- TEMP - AUTO REFRESH --> 
    <meta http-equiv="refresh" content="2" /> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    <title>OJMari</title> 
</head> 
<body> 
    <div class="logoarea"> 
    <img src="images/logo.png" alt="OJMari Logo" class="logo" /> 
    </div> 
    <div class="topnavbar"> 
    test 
    </div> 
</body> 
</html>

これは私のhtmlコードです。私はそれが間違っているとは思わない。

私はすでにこれらの両方を検証しているので、なぜこれが起こっているのか知っていますか？好奇心を持っている人にとっては、これがGoogle Chrome 59のHTML出力です。 HTML Output

出典

2017-05-13 MTMaster

はあなたのファイルの種類が '.TFF'ではなく' .TTF'でよろしいの.ttf へのフォントの拡張子を変更してください？ – RBCunhaDesign

+0

関連：http://stackoverflow.com/questions/14393302/ttf-files-not-rendering-on-chrome-and-firefox –

フォントの種類が正しくないようです。

@font-face { 
    font-family: 'raleway'; 
    src: url("Raleway-Regular.ttf") format("truetype"); 
}

出典

2017-05-13 03:54:04

うわー、ありがとう！私はそれがそんなに愚かなミスだったかもしれないと思った...私はそれを変更し、フォントは今完全に動作しています。 – MTMaster

問題が別のブラウザが見る、異なるフォントファイル形式を必要とするということです。https://help.webflow.com/article/list-of-font-file-types-for-maximum-browser-support

ないあなたはSASSを使用するが、これはあなたに私が何を意味するかのアイデアを与える必要があるかどうかわから：

https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6

出典

2017-05-13 02:52:07

CSS @ font-faceが動作しない、デフォルトのフォントが表示される

答えて

関連する問題