web-dev-qa-db-ja.com

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

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

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

常にオフラインで実行されているページで使用するようにダウンロードしてセットアップするにはどうすればよいですか？

cssfontsofflinegoogle-fonts
120
user2147954

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'>
88
Dmitriy Butenko

チェックアウト google webfonts helper

GoogleのすべてのWebフォントをダウンロードして、実装用のCSSコードを提案できます。このツールを使用すると、すべての形式を簡単に一度にダウンロードすることもできます。

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

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

277
Marco Kerwitz

これを達成するための段階的な方法を見つけました（1フォント）：
（2013年9月9日現在）

  1. http://www.google.com/fonts でフォントを選択します
  2. [コレクションに追加]青いボタンを使用して、目的のコレクションをコレクションに追加します
  3. 「コレクションから削除」ボタンの近くにある「すべてのスタイルを見る」ボタンをクリックし、「太字」など必要な他のスタイルを選択していることを確認してください...
  4. ページの右下にある[使用]タブボタンをクリックします
  5. 下向きの矢印の付いたダウンロードボタンをクリックします
  6. 表示されるポップアップメッセージで[Zipファイル]をクリックします
  7. ポップアップの[閉じる]ボタンをクリックします
  8. 3つのタブ「Standrd | @import | 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名でこのフォントを参照してください

それでおしまい。 私は同じ問題を抱えていて、上の解決策は私にとってはうまくいかなかったためです。

40
1111161171159459134

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

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

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

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

23
sym3tri

この便利な記事 を見て、Googleフォントをオフラインで使用する方法を説明してください

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

@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');
3
davidb

3つのステップ：

  1. Goole Fontsでカスタムフォントをダウンロードし、.cssファイルをダウンロードしますex：ダウンロード http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,3 として保存し、example.css
  2. ダウンロードしたファイルを開きます（example.css）。ここで、すべてのフォントフェースファイルをダウンロードして、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ファイルを含むすべてのフォントをダウンロードしてください。

3
duydb

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

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

2
Pierre-Adrien Buisson

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

npm-Googleフォントのダウンロードs

typefaces project は、オープンソースの書体のNPMパッケージを作成します。

各パッケージには、オープンソースの書体をセルフホストするために必要なすべてのfonsとcssが付属しています。
すべてのGoogleフォントが追加されましたが、その他のオープンソースフォントの小さいながらも拡大しているリストもあります。

typeface-roboto または typeface-open-sans のような利用可能なフォントを閲覧するには、typeface-<typefacename>を search npm だけでインストールします：

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

npm-Google Fontsダウンロード-ers

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

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

さらに読む：

1
KyleMit

duydb's answerに従って、このプロセスを自動化する以下の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)

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

0
Wytamma Wirth