私の回答はかなり古くなっています。
以下に、他のより技術的に洗練された回答があります。
これが現在受け入れられている答えであるという事実が、これがまだ最良の答えであるという印象を与えないようにしてください。
githubのgoogle / fontリポジトリからgoogleのフォントセット全体をダウンロードすることもできます。また、フォントの〜420MB zipスナップショットも提供します。
最初に、フォントの選択をzip形式のパッケージとしてダウンロードし、多数のTrue Typeフォントを提供します。それらをあなたのCSSからリンクできるどこか、どこかに公開してください。
グーグルウェブフォントのダウンロードページには、次のようなインクルードリンクがあります:
http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal
@font-face
一連の定義を介してフォントを定義するCSSにリンクします。
ブラウザーで開き、それらをコピーして独自のCSSに貼り付け、URLを変更して適切なフォントファイルとフォーマットタイプを含めます。
したがって、この:
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
これになる:
/* Your local CSS File */
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}
ご覧のように、この方法で独自のシステムでフォントをホストすることの欠点は、実際のタイプのフォーマットに制限されるのに対し、Google Webfontサービスは、アクセスするデバイスによって送信されるフォーマットを決定することです。
さらに、.htaccess
Chrome Dev Toolsでエラーが発生しないように、mimeタイプを含むフォントを含むディレクトリにファイルを追加する必要がありました。
このソリューションでは、真のタイプのみが必要ですが、のように別のフォントも含めたい場合、それを定義しても問題はありませんfont-awesome
。
#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff