Googleフォントをダウンロードして、それを使用するオフラインサイトを設定する

テンプレートがあり、次のようなGoogleフォントへの参照があります。

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

それをダウンロードして、常にオフラインで実行しているページで使用するように設定するにはどうすればよいですか？

Google Fonts- http://www.google.com/fonts/にアクセスし、好きなフォントをコレクションに追加して、ダウンロードボタンを押してください。次に、@ fontfaceを使用して、このフォントをWebページに接続します。ところで、使用しているリンクを開くと、@ fontfaceの使用例が表示されます

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

例として

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

ダウンロードしたフォントファイルのローカルリンクにURLアドレスを変更するだけです。

もっと簡単にできます。

リンクしたファイルをダウンロードするだけです。

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

opensans.cssなどの名前を付けます。

次に、url（）のリンクをフォントファイルへのパスに変更します。

次に、例の文字列を次の文字列に置き換えます。

<link href='opensans.css' rel='stylesheet' type='text/css'>

グーグルウェブフォントヘルパーをチェックしてください

それはあなたがグーグルのすべてのウェブフォントをダウンロードすることを可能にし、実装のためのCSSコードを提案します。このツールを使用すると、手間をかけずに、すべてのフォーマットを一度にダウンロードすることもできます。

Googleがウェブフォントをホストしている場所を知りたいと思ったことはありませんか？このサービスは、フォントバリアントのすべての.eot、.woff、.woff2、.svg、.ttfファイルをgoogleから直接ダウンロードする場合に便利です（通常、ユーザーエージェントが最適なフォーマットを決定します）。

また、Githubページもご覧ください。

この（1つのフォントのため）を達成するためのステップバイステップの方法を発見した：
（2013年9月- 9のように）

1. http://www.google.com/fontsでフォントを選択してください
2. [コレクションに追加]の青いボタンを使用して、必要なものをコレクションに追加します
3. [コレクションから削除]ボタンの近くにある[すべてのスタイルを表示]ボタンをクリックし、「太字」など、必要になる可能性のある他のスタイルを選択していることを確認します...
4. ページの右下にある[使用]タブボタンをクリックします
5. 下向き矢印の画像が表示されている上部のダウンロードボタンをクリックします。
6. 表示されるポップアップメッセージの「zipファイル」をクリックします
7. ポップアップの「閉じる」ボタンをクリックします
8. 3つのタブ「標準| @インポート| JavaScript」が表示されるまで、ページをゆっくりスクロールします
9. 「@import」タブをクリックします
10. との間'url('でURLを選択してコピーします')'
11. 新しいタブのアドレスバーにコピーしてそこに移動します
12. 「ファイル>名前を付けてページを保存...」を実行し、「desiredfontname.css」という名前を付けます（適宜置き換えます）
13. ダウンロードしたフォント.zipファイルを解凍します（.ttfを抽出する必要があります）
14. " http://ttf2woff.com/にアクセスします」に、zipから抽出された.ttfを.woffに変換します
15. 編集desiredfontname.cssとの間で、[その中に任意のURLを交換'url('し、')' ]あなたはttf2woff.comに乗っ対応する変換.woffファイルを使用して、書き込むパスは、サーバーのdoc_rootに従う必要があります
16. ファイルを保存して最終的な場所に移動し、対応する<link/>CSSタグを記述して、これらをHTMLページにインポートします。
17. 今からfont-family、スタイルでこのフォントを名前で参照してください

それでおしまい。原因私は同じ問題を抱えていて、上の解決策はうまくいきませんでした。

他の答えは間違っていませんが、これが最速の方法であることがわかりました。

1. Googleフォントからzipファイルをダウンロードして解凍します。
2. フォントファイルを3つずつhttp://www.fontsquirrel.com/tools/webfont-generatorにアップロードします。
3. 結果をダウンロードします。

結果には、すべてのフォント形式（woff、svg、ttf、eot）が含まれます。

さらに追加のボーナスとして、CSSファイルも生成されます！

3つのステップ：

1. カスタムフォントをGooleフォントでダウンロードし、.cssファイルをダウンロードします。例：http ://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300をダウンロードし 、example.cssとして保存します。
2. ダウンロードしたファイル（example.css）を開きます。次に、すべてのfont-faceファイルをダウンロードして、fontsディレクトリに保存する必要があります。
3. example.cssを編集：すべてのfont-faceファイルを.cssダウンロードに置き換えます

例：

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

src：-> urlを見てください。http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2をダウンロードして、fontsディレクトリに保存します。その後、ダウンロードしたすべてのファイルのURLを変更します。今では次のようになります

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** .cssファイルを含むすべてのフォントをダウンロードしてください

パッケージの依存関係を明示的に宣言するか、ダウンロードを自動化する場合は、ノードパッケージを追加して、Googleフォントを取得し、ローカルで提供できます。

NPM - GoogleのフォントのダウンロードS

書体プロジェクトは、オープンソースの書体についてNPMパッケージを作成します。

各パッケージには、オープンソースの書体をセルフホストするために必要なすべてのfonsとcssが同梱されています。
すべてのGoogleフォントと、他のオープンソースフォントの数は増えていますが、増え続けています。

ただ、NPMを検索するためのような利用可能なフォントブラウズする書体-robotoや書体・オープンSANをして、次のようにインストールします。typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

NPM - Googleのフォントダウンロード- ERS

より一般的な使用例として、2つのステップでフォントを配信するnpmパッケージがいくつかあります。最初にパッケージを取得し、次に、パッケージに含めるフォント名とオプションを指定します。

オプションの一部を次に示します。

• Google Fonts Webpackプラグイン
• Google Fonts Offline
• Googleフォント
• Google Fontsを入手

さらに読む：

• マテリアルアイコンをオフラインでホストする方法は？
• ElectronアプリでオフラインマテリアルアイコンとRobotoフォントを使用する

基本的に、プロジェクトにフォントを含めます。

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

Google Fontsを使用する場合、ワークフローは「選択」、「カスタマイズ」、「埋め込み」の3つのステップに分かれます。よく見ると、[使用]ページの右端に小さな矢印があり、現在コレクションにあるフォントをダウンロードできます。

その後、システムにフォントがインストールされたら、font-familyCSSディレクティブを使用して他の通常のフォントと同じように使用するだけです。

duydbの回答に従って、このプロセスを自動化する以下のpythonコードを生成しました。

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

これがコピー＆ペーストの死の一部に役立つことを願っています。

フォントをダウンロードしてローカルで参照する必要があります。

CSS投稿したリンクからをダウンロードし、すべてのWOFFファイルをダウンロードして、（必要に応じて）に変換しますTTF。

次に、CSS投稿したリンクから、フォントをローカルに含めるように変更します。

から

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

に

url(/path/to/font/font.woff)

出来上がり！あなたがする必要があるいくつかがあるかもしれませんが、上記は基本です。この記事ではもう少し説明します。

フォントをダウンロードしてフォルダに抽出するだけです。次に、そのフォントをリンクします。以下のコードが適切に機能しました。

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}