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

テンプレートがあるのですが、このようにGoogleフォントを参照するようになっています。

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

オフラインでずっと動いている私のページで使うには、どのようにダウンロードして設定すればいいのでしょうか？

unor
編集された質問 21日 5月 2018 в 1:03
プログラミング
fonts offline css google-fonts
10日 4月 2013 в 3:22
187 ビュー

google webfonts helper をチェックしてください。

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

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

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

KyleMit
編集した答え 25日 11月 2018 в 6:22
解説 (9)
ソリューション

Googleフォント-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()のリンクをフォントファイルへのパスに変更します。

次に、サンプル文字列を次のものに置き換えます。

KyleMit
編集した答え 25日 11月 2018 в 2:43
解説 (7)

これを達成するための段階的な方法を見つけました(1フォントの場合):< br />。 ( 2013年9月9日現在)。

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

それでおしまい。 同じ問題があり、その上の解決策がうまくいかなかったからです。< br />。

nhahtdh
編集した答え 6日 9月 2013 в 8:11
解説 (2)

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

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

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

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

解説 (4)

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');
解説 (1)

3つのステップ:

1。 Gooleフォントでカスタムフォントをダウンロードし、.cssファイルをダウンロードします。 ex: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ファイルが含まれていることをダウンロードします。 それがあなたを助けることを願っています。

解説 (0)

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

その後、一度フォントをシステムにインストールしたら、他の普通のフォントと同じように font-family CSSディレクティブを使用して使用する必要があります。

KyleMit
編集した答え 25日 11月 2018 в 2:52
解説 (0)

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

npm-Googleフォントダウンロード< i> s< / i>。

typefacesプロジェクトは、オープンソースタイプフェースのNPMパッケージを作成します。

各パッケージには、オープンソースタイプフェイスをセルフホストするために必要なすべてのフォンとcssが付属しています。 すべてのGoogleフォントが追加され、他のオープンソースフォントのリストも小さくなっています。

typeface-< typefacename >< / code>の[npmを検索][11]を検索] typeface-robotoやtypeface-open-sansなどの使用可能なフォントを参照し、次のようにインストールします。

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

npm-Googleフォントダウンロード-< i> ers< / i>。

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

ここにいくつかのオプションがあります:

さらに読む:

[11]:https://www.npmjs.com/search?q = author%3Akylemathews%20typeface-。

KyleMit
編集した答え 25日 11月 2018 в 7:00
解説 (0)

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

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

Wytamma Wirth
編集した答え 15日 4月 2018 в 4:35
解説 (0)

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

投稿したリンクからCSSをダウンロードし、次にWOFFファイルをすべてダウンロードし、（必要であれば）TTFに変換してください。

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

から

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

への

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

これで完了です。他にも必要なことがあるかもしれませんが、上記が基本です。この記事では、もう少し詳しく説明しています。

解説 (3)

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

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