ローカルに保存されたGoogleウェブフォントとオンラインソース

Question

CSSファイルで@importルールを使用してGoogleウェブフォントを追加すると、正常に動作します。

しかし、そのフォントをダウンロードしてサーバーにローカルに保存してから、@ font-faceルールを自分のマシンに転送すると機能しません。

だから私がやったことは、この行を置き換えることだった、私のCSS/fonts.cssファイルに：これで

@import url(http://fonts.googleapis.com/css?family=Michroma); 

：つまり

@font-face { 
font-family: 'Michroma'; 
font-style: normal; 
font-weight: 400; 
src: url(http://localhost/xampp/mysite/css/fonts/michroma/micrhoma.woff) format('woff'); 
} 

、私はちょうどからコードをコピーそのフォントのgoogleapi。そして上記のパスにフォントファイル（.woff）を保存しました（私は再確認しました、実際にそこにあります）。

私もこれにURLを編集してみましたが、ない良い：

src: url(fonts/michroma/michroma.woff) format('woff'); 

私たちは、ローカルにそれらを使用している場合、Googleのウェブフォントが動作しない理由は何らかの理由があると信じ、そうそこになければならないことはできません私がやっていることに何か間違っている。手がかり？とにかく私たち自身のフォントフェイスをどう定義するのでしょうか？ （私は前にそれを試したことがない）。

Answer 1

単一フォントでは、フォントファミリ名の引用符は必要ありません。削除して実行すると正常に動作します。 font-family：Michroma;

Answer 2

コメントに示されているように、問題の原因はURLのフォント名のスペルミスです。

これは、Googleのフォントをローカルで使用する方法です。適切な方法は、http：URLではなくlocalhost（コンピュータ上でHTTPサーバーを実行する必要があります）というfonts/michroma/michroma.woffのような相対URLを使用することです。

ただし、WOFF形式（この場合）をサポートしていないブラウザでは機能しません。一般的に、リモートでホストされているGoogleフォントを使用する方が、さまざまなブラウザに異なるフォントフォーマットを提供する方法を知っているので、より優れています。 Cf。 〜Should I locally store CSS generated by the Google Web Fonts API?