自分のサーバーで Google ウェブフォントをホストするにはどうすればいいですか? 質問する

Question

私の回答はかなり古くなっていることをご留意ください。

以下に、より技術的に洗練された回答を示します。

したがって、これが現在受け入れられている答えであるという事実によって、これが依然として最善の答えであるという印象を受けないようにしてください。

また、Googleのフォントセット全体をgithubからダウンロードすることもできます。グーグル/フォントリポジトリも提供しています。フォントの約1GBのzipスナップショット。

まず、フォントの選択を zip パッケージとしてダウンロードします。これにより、多数の TrueType フォントが提供されます。それらを、CSS からリンクできるパブリックな場所にコピーします。

Google Web フォントのダウンロードページには、次のようなインクルードリンクがあります。

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 Web フォントサービスがアクセスするデバイスによってどの形式が送信されるかを決定する一方で、True Type 形式に制限されることです。

.htaccessさらに、 Chrome Dev Tools でエラーが表示されないように、MIME タイプを含むフォントを保持するディレクトリにファイルを追加する必要がありました。

このソリューションでは、TrueType のみが必要ですが、などの異なるフォントも含める場合は、さらに定義しても問題ありませんfont-awesome。

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Answer 1