web-dev-qa-db-ja.com

自分のサーバーでGoogle Webフォントをホストする方法

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

fontsgoogle-font-api
259
Samarth Bhargava

私の答えは古くなっていることを忘れないでください。

以下に、他にも技術的に洗練された回答があります。

それで、これが現在受け入れられている答えであるという事実があなたにこれがまだ最高のものであるという印象を与えさせないでください。

また、githubの google/font リポジトリで、Googleのフォントセット全体をダウンロードすることもできます。それらはまた 彼らのフォントの〜360MB Zipスナップショット も提供します。

あなたはまずあなたが選択したフォントをzip圧縮パッケージとしてダウンロードし、あなたにたくさんの真のタイプのフォントを提供します。あなたのcssからリンクできるどこかに、公のどこかにコピーしてください。

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

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');
}

お分かりのように、あなた自身のシステムでフォントをこのようにホストすることのマイナス面は、あなたが本当のタイプフォーマットにあなた自身を制限する一方で、グーグルウェブフォントサービスはアクセスするデバイスによってどのフォーマットが送信されるかを決めるということです。

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

この解決法では、真の型のみが必要ですが、font-awesomeのように、異なるフォントを含めたいときにmoreを定義しても問題ありません。

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

あなたがすべてのフォントの亜種をダウンロードするのに役立つツール localfont.com があります。実装用の対応するCSSも生成します。 非推奨

localfontがダウンしています。代わりに、 Damirが推奨する のように、 google-webfonts-helper を使用できます。

197
udondan

素晴らしい解決策は google-webfonts-helper です。

それはあなたが多くの時間を節約するあなたが一つ以上のフォントの変種を選択することを可能にします。

126
Damir Bulic

私は bashスクリプト を作成しました。これはGoogleのサーバー上のCSSファイルをさまざまなユーザーエージェントで取得し、さまざまなフォント形式をローカルディレクトリにダウンロードしてそれらを含むCSSファイルを書き込みます。スクリプトにはBashバージョン4.xが必要です。

スクリプトについては、 https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ を参照してください（ここでは再現していません）。私がする必要があるとき、私はただ一箇所でそれを更新する必要があります。

編集：https://github.com/neverpanic/google-font-download に移動しました

58
neverpanic

（インクルードURLからの）CSSファイルの内容は、どのブラウザから見たかによって異なります。たとえば、Chromeを使用して http://fonts.googleapis.com/css?family=Open+Sans にアクセスすると、ファイルにはWOFFリンクしか含まれていませんでした。 Internet Explorer（下記）を使用して、それはEOTとWOFFの両方を含みました。ダウンロードするために、すべてのリンクをブラウザに貼り付けました。

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

あなた自身のWebフォントをホストするときは、 各フォントタイプに正しくリンクする 、レガシブラウザのバグなどに対処する必要があります。GoogleWebフォント（Googleによってホストされる）を使うとき、Googleは自動的にそのブラウザの正しいフォントタイプ。

12
Michael McGinnis

あなたがフォントのライセンスの条項 - 通常はOFLに固執する限り、それは合法的に許可されています。

あなたは一連のウェブフォントフォーマットを必要とするでしょう、そして Font Squirrel Webfont Generator はこれらを作り出すことができます。

しかし、OFLでは、フォントを変更する場合はフォントの名前を変更する必要がありました。ジェネレータを使用するとフォントが変更されます。

6
davelab6

私はPHPで書かれた @ neverpanic に似たスクリプトを持っていて、それは自動的にCSSとフォントの両方をダウンロードします（ヒントとヒントなしの両方）Googleから。それはそれからUser Agentに基づいてあなた自身のサーバーから正しいCSSとフォントを提供します。それはそれ自身のキャッシュを保持するので、ユーザーエージェントのフォントとCSSは一度だけダウンロードされるでしょう。

それは時期尚早の段階にあります、しかしそれはここで見つけることができます： DaAwesomeP/php-offline-fonts

2
DaAwesomeP

私の解決策は、GoogleのWebフォントからTTFファイルをダウンロードしてから onlinefontconverter.com を使用することでした。

1
Adam Youngers

あなたは実際にGoogleから直接すべてのフォントフォーマットの変種をダウンロードしてあなたのサーバーから提供するためにあなたのcssに含めることができます。そうすれば、Googleがサイトのユーザーを追跡することを心配する必要がなくなります。しかし、マイナス面はあなた自身のサービングスピードを遅くするかもしれません。フォントはリソースに対してかなり要求が厳しいです。今号ではまだテストをしていませんが、似たような考えがある人もいるでしょうか。

1
Flyhead

あなたがあなた自身のサーバーですべてのフォント（またはそれらのいくつか）をホストしたいならば、あなたはこのリポジトリからフォントをダウンロードしてあなたが望む方法でそれを使う： https://github.com/praisedpk/Local-Google） - フォント

1
Hamid Sarfraz

Webpackを使っているなら、このプロジェクトに興味があるかもしれません： https://github.com/KyleAMathews/typefaces

例えば。あなたはRobotoフォントを使いたいと言います。

npm install typeface-roboto --save

それからそれをあなたのアプリのエントリーポイント（メインのjsファイル）にインポートするだけです。

import 'typeface-roboto'
1
justin

以下のようなGoogle Fonts CSSインポートURLからダウンロードリンクを取得するための小さなPHPスクリプトを作成しました： https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato：400,300イタリック、900イタリック

あなたはここでこのツールを使用することができます： http://nikoskip.me/gfonts.php

たとえば、上記のインポートURLを使用すると、次のようになります。

enter image description here 

1
nikoskip

不気味なタスクで grunt-local-googlefont を使用しました。

module.exports = function(grunt) {

    grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),

        "local-googlefont" : {
            "opensans" : {
                "options" : {
                    "family" : "Open Sans",
                    "sizes" : [
                        300,
                        400,
                        600
                    ],
                    "userAgents" : [
                        "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)",  //download eot
                        "Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf
                        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2
                    ],
                    "cssDestination" : "build/fonts/css",
                    "fontDestination" : "build/fonts",
                    "styleSheetExtension" : "css",
                    "fontDestinationCssPrefix" : "fonts"

                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-local-googlefont');
 };

それから、それらを取り出すために：

grunt local-googlefont:opensans

注意してください、私はオリジナルからのフォークを使っています、それはそれらの名前に空白を含むフォントを検索するときよりよく働きます。

1
Hank

ソースフォントは https://github.com/google/fonts からダウンロードできます。

その後、font-rangerツールを使用して、大きなUnicodeフォントを複数のサブセット（ラテン、キリルなど）に分割します。あなたはこのツールで次のことをするべきです：

  • サポートしている言語ごとにサブセットを生成する
  • 帯域幅を節約するためにUnicode範囲サブセットを使用する
  • フォントから膨張を取り除き、Web用に最適化する
  • あなたのフォントを圧縮されたwoff2フォーマットに変換する
  • 古いブラウザに.woffフォールバックを提供
  • フォントの読み込みとレンダリングをカスタマイズする
  • @ font-faceルールを使ってCSSファイルを生成する
  • セルフホストWebフォントまたはローカルで使用する

フォントレンジャー： https://www.npmjs.com/package/font-ranger

P.S Node.js APIを使ってこれを自動化することもできます。

0
Do Async

Google Webフォントリンクからすべてのフォントをダウンロードするための、プレーンJavaで書かれた非常に単純なスクリプトがあります（複数のフォントがサポートされています）。また、CSSファイルをダウンロードしてローカルファイルに適応させます。ユーザーエージェントは、WOFF2以外の他のファイルも取得するように適応させることができます。 https://github.com/ssc-hrep3/google-font-download を参照してください。

作成されたファイルはビルドプロセスに簡単に追加することができます（例えば vue-webpack のようなwebpackビルド）。

0
ssc-hrep3

k0pernicus に加えて best-serving-local を提案したいと思います。それはまたウェブサーバーオペレータが彼ら自身のウェブサーバーからGoogleウェブフォントをダウンロードして提供することを可能にするためのbash（v4）スクリプトです。しかし、他のbashスクリプトに加えて、ユーザーは最新のフォントファイルとcssファイルの提供を（cronなどを介して）完全に自動化できます。

0
Ronald van Engelen