1. ホーム
  2. fonts

[解決済み】自分のサーバーでgoogle web fontsをホストする方法は?

2022-04-03 02:24:40

質問

イントラネットのアプリケーションで、いくつかのgoogleフォントを使用する必要があります。クライアントはインターネットに接続できるかもしれませんし、できないかもしれません。ライセンス条項を読むと、合法的に許可されているようです。

どのように解決するのですか?

回答がだいぶ古くなってしまいましたが、ご了承ください。

以下にも、より技術的に洗練された回答がある、など。

というわけで、これが現在受け入れられている答えであるという事実によって、これがまだベストな答えであるという印象を与えないようにしましょう。


また、googleの全フォントセットをgithubでダウンロードできるようになりました。 google/font レポジトリにあります。また、彼らは ~フォントの420MBのzipスナップショット .


まず、フォントセレクションをzip圧縮されたパッケージとしてダウンロードし、トゥルータイプフォントの束を提供します。それらをどこか公開できる場所にコピーし、CSSからリンクできるようにします。

google webfontのダウンロードページには、このようなincludeリンクがあります。

http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal

の束でフォントを定義したCSSにリンクしています。 @font-face の定義があります。

ブラウザで開いてコピーし、自分の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 というファイルを、MIMEタイプを含むフォントを格納するディレクトリに追加することで、Chrome Dev Toolsでエラーが出ないようにしました。

このソリューションでは、true type だけが必要ですが、異なるフォントも含めたい場合は、さらに定義しても支障はありません。 font-awesome .

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