283

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

4

19 に答える 19

229

私の答えはかなり古くなっていることに注意してください。

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

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

また、github のgoogle/fontリポジトリから google のフォント セット全体をダウンロードすることもできます。また、フォントの最大 420 MB の zip スナップショットも提供しています。

まず、選択したフォントを zip パッケージとしてダウンロードし、True Type フォントの束を提供します。css からリンクできる公開されている場所にコピーします。

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

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 Web フォント サービスは、アクセスするデバイスによって転送される形式を決定します。

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

このソリューションでは、true 型のみが必要ですが、font-awesome.

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
于 2012-11-02T15:02:42.240 に答える
157

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

複数のフォントバリアントを選択できるため、時間を大幅に節約できます。

于 2015-08-04T05:54:02.637 に答える
64

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

スクリプトについては、 https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/を参照してください(ここでは再現しないので、必要なときに 1 か所)。

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

于 2014-04-19T18:50:25.247 に答える
6

フォントのライセンス (通常は OFL) の条件に従う限り、法的に許可されます。

Web フォント形式のセットが必要になります。Font Squirrel Webfont Generatorはこれらを作成できます。

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

于 2012-01-28T00:48:33.497 に答える
3

Google からCSS とフォント (ヒント付きとヒントなしの両方) の両方を自動的にダウンロードする@neverpanicのスクリプトと同様の PHP で記述されたスクリプトがあります。次に、ユーザー エージェントに基づいて、独自のサーバーから正しい CSS とフォントを提供します。独自のキャッシュを保持するため、ユーザー エージェントのフォントと CSS は一度だけダウンロードされます。

未熟な段階ですが、ここで見つけることができます: DaAwesomeP / php-offline-fonts

于 2014-04-20T02:46:26.347 に答える
2

独自のサーバーですべてのフォント (またはそれらの一部) をホストする場合は、このリポジトリからフォントをダウンロードして、必要な方法で使用します: https://github.com/praisedpk/Local-Google-Fonts

Google Fonts に付随するブラウザーのキャッシングの問題を解決するためにこれを行いたいだけの場合は、代替フォント CDNを使用して、次のようにフォントを含めることができます。

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

または、次のような特定のフォント:

<link href="https://pagecdn.io/lib/easyfonts/lato.css" rel="stylesheet" />
于 2017-03-23T16:14:31.413 に答える
1

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

于 2016-03-31T23:34:27.150 に答える
1

grunt タスクで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

名前に空白を含むフォントを取得する場合に、元のフォークを使用していることに注意してください。

于 2015-12-10T14:27:28.760 に答える
1

実際には、すべてのフォント形式のバリアントを Google から直接ダウンロードして、CSS に含めてサーバーから提供することができます。そうすれば、Google がサイトのユーザーを追跡することを心配する必要はありません。ただし、マイナス面として、サービス速度が遅くなる可能性があります。フォントはリソースをかなり必要とします。この問題についてはまだテストを行っていませんが、同様の考えを持っている人がいるのだろうか.

于 2016-02-25T10:52:43.997 に答える
1

次のような Google Fonts CSS インポート URL からダウンロード リンクを取得する小さな PHP スクリプトを作成しました。

このツールは、http: //nikoskip.me/gfonts.phpで使用できます。

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

ここに画像の説明を入力

于 2017-02-02T17:49:34.277 に答える