web-dev-qa-db-ja.com

（公式）Google Web Fontsリポジトリから複数の形式のWebフォントをダウンロードする方法は？

Googleは[〜＃〜] ttf [〜＃〜]、[〜＃ 〜] eot [〜＃〜]、[〜＃〜] woff [〜＃〜]、または[〜＃〜] svg [〜＃〜]ブラウザ/デバイスに応じたフォントファイルアクセス元。

現在、サーバー自体からフォントファイルをホストして提供することを計画しています。そのためには、まず、Webフォントのすべてのファイル形式をダウンロードする必要があります。

使用したいWebフォントの4つのファイル形式をどのように、またはどこでダウンロードできますか？

PS：異なるブラウザを使用する-Chrome、IE9、Safari （dev-iPhone UA）、WOFF、EOT、TTF形式を取得できました。ただし、SVG形式ではうまくいきません。もっと簡単な方法があれば素晴らしいでしょう。

編集：ああ、ところで、私は fontsquirrel からさまざまなフォーマットをダウンロードできることを知っていますが、ここで公式リポジトリからダウンロードすることについて話しているのです。

webfontsgoogle-webfonts
34
its_me

http://code.google.com/p/googlefontdirectory/ でGoogle webfontsディレクトリを複製できます。

http://code.google.com/p/googlefontdirectory/source/browse/#font_name で単一のフォントファイルを取得することもできます。

8
honyovk

=======更新済み2016-05-31 =======

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

ここでこのツールを使用できます： http://nikoskip.me/gfonts.php

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

enter image description here

Chromeの新しいリリースごとにこの回答を更新することにうんざりしました。ユーザーエージェント文字列のなりすましの方法が常に変わるため、代わりにこのスクリプトを使用してください。

=======旧ソリューション=======

ChromeのDevToolsを使用すると、ユーザーエージェントをオーバーライドできます。

方法：

  1. Google Fontsページで必要なフォントを入手してください。
  2. 次のようなCSSにインポートするURLを取得します。 http://fonts.googleapis.com/css?family=Cabin:500,700,500italic,700italic
  3. ブラウザでそのURLを開くと、実際にフォントをダウンロードできる完全なURLが表示されます。
  4. 開発者ツール（F12）に移動し、ESCを押します
  5. 「エミュレーション」タブを選択し、「ネットワーク」サブタブをクリックします
  6. 最後に_Spoof user agent_でEOT形式のIE9を選択、Android 4およびSVGのこのUA文字列：Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3（匿名に感謝））
51
nikoskip

SVGやwoff2などのフォントダウンロードURLを取得する方法。

各フォントをダウンロードするために必要なユーザーエージェントは次のとおりです。 ソース 。

module.exports = {
  USER_AGENTS: {
    eot: 'Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)',
    woff: 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0',
    woff2: 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML like Gecko) Chrome/38.0.2125.104 Safari/537.36', // complete woff2 file for one variant
    svg: 'Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3',
    ttf: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16'
  },
  GOOGLE_FONTS_API_KEY: 'AIzaSyDY-C-Lt9uyPP5fSTjMCR4bB944SlI4spw',
  CACHE_DIR: __dirname + "/cachedFonts/",
}

Devtoolを使用してこれらのユーザーエージェントを追加します。

How to add new devices to chrome

ソース

https://fonts.googleapis.com/css?family=Open+Sansにアクセスしてユーザーエージェントを偽装し、@font-faceにあるURLにアクセスしてフォントをダウンロードできるようになりました。

または、 google-webfonts-helper がすべてを行います。 google-webfonts-helper 素晴らしいブログ投稿があります こちら 私が画像を取得した開発者から。

なぜ自分でホストしたいのですか？

可能であれば、常に共通のCDNを使用してください。フォントをダウンロードする必要さえない可能性が非常に高いです（ブラウザキャッシュ）。

グーグルがユーザーに間違ったフォントを送信することを心配している場合、ユーザーエージェントを偽装している可能性が高いため、別のオプションでグーグルホスティングを使用する利点があります。

@font-faceを自分で挿入し、上記の手順を使用してgoogleフォントのURLを見つけ、<head>に挿入します。

<style>

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url(google-font-url-here/opensans.eot);
    src: local('Open Sans'), local('OpenSans'),
    url(google-font-url-here/opensans.eot?#iefix) format('embedded-opentype'),
    url(google-font-url-here/opensans.woff2) format('woff2'), 
    url(google-font-url-here/opensans.woff) format('woff'), 
    url(google-font-url-here/opensans.ttf) format('truetype'), 
    url(google-font-url-here/opensans.svg#OpenSans) format('svg');
}

</style>

URLSが変更される可能性があるため、これにはリスクが伴います！

5
TarranJones

私はオンラインクローンを作りました:)

https://bitbucket.org/Tymek/google-web-fonts/ どうぞ！

3
Tymek

複数の異なるユーザーエージェントに提供されるフォントを自動的にダウンロードするPowerShellスクリプトを作成しました。基本フォントの場合、4つの形式（woff、ttf、svg、eot）をすべて取得します。 Googleは、太字および斜体の重みのSVGおよびEOTファイルを提供していないようです。


$agents = "Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0",`
    "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1",`
    "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)",`
    "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7",`
    "Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB7.4; InfoPath.2; SV1; .NET CLR 3.3.69573; WOW64; en-US)"

foreach($arg in $args) {
    $arg;
    foreach($agent in $agents) {
        $agent;
        $webclient = New-Object System.Net.WebClient
        [void]$webclient.Headers.Add("user-agent", $agent)
        $url = "http://fonts.googleapis.com/css?family=$arg"

        $css = $webclient.DownloadString($url)
        $css
        $fonts = $css |
            Select-String -AllMatches "http://[A-Za-z0-9/._?&=%-]+" |
            Select-Object -ExpandProperty Matches |
            Select-Object -ExpandProperty Value

        foreach($font in $fonts) {
            $font
            $fontfile = [System.Io.Path]::GetFileName((new-object System.Uri $font).LocalPath)
            [void]$webclient.DownloadFile($font, "$pwd\$fontfile")
        }
    }
}

.ps1ファイルに格納されると、引数としてダウンロードするフォントで呼び出すことができます。

PS> .\DownloadFonts.ps1 "Open+Sans:400,700,400italic,700italic"

スクリプトは、Googleのサーバーから取得したCSSを出力して、どのファイルがどのファイルであるかを判断できるようにします（たとえば、私の場合、SVGフォントは「font」というファイルとして取得されました）。

これは、RichardNおよびldeckがブログ投稿に投稿したbashスクリプトに基づいています Locally Caching Google Web Fonts 。

参考のために、ldeckのbashスクリプトを次に示します。


#!/bin/sh

for family in $*; do
 for url in $( {
 for agent in \
 'Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0' \
 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1' \
 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)' ;
 do
 curl -A "$agent" -s "http://fonts.googleapis.com/css?family=$family" | \
 grep -oE 'http://[A-Za-z0-9/._-]+'; \
 done } | sort -u ) ;
 do
 extn=${url##*.} ;
 file=$(echo "$family"| tr +[:upper:] _[:lower:]);
 echo $url $file.$extn;
 curl -s "$url" -o "$file.$extn";
 done
done

詳細なリファレンス： HTML5 AppCacheを使用 。

2
AaronSieb

とにかく私はこのビジネスやウェブサイトとは提携していませんが、 onlinefontconverter.com で必要なすべてのフォーマットを取得できました。

Eot、svg、woff、ttf形式が必要でした。私はすでにttfを持っていました。私はそれをアップロードし、サイトは残りを作成しました-すべては数分で。

1
Victor Stoddard

私は pythonスクリプト をオープンソースプロジェクトでの作業の一部として作成しました [〜＃〜] mdidx [〜＃〜] 。 Google Fonts CDNから特定のフォントファミリーのすべての可能なフォント形式を取得します。ナイーブ-総当たり攻撃の共通プラットフォームのユーザーエージェント

次のように簡略化できます。

import re
import os
import requests

def main():
    font_family = "Material Icons"
    output_directory = "fonts"
    download_fonts(font_family, output_directory)

def download_fonts(font_family, output_directory, output_file_name=None):
    if not os.path.isdir(output_directory):
        os.makedirs(output_directory)

    if not output_file_name:
        output_file_name = font_family.lower().replace(" ","-")

    user_agents = USER_AGENTS.splitlines()
    user_agents = map(lambda x: x, user_agents)

    font_urls = set()
    for user_agent in user_agents:
        url = 'https://fonts.googleapis.com/icon?family={}'.format("+".join(font_family.strip().split()))
        r = requests.get(url, headers={"user-agent": user_agent})
        r.raise_for_status()
        urls = re.findall('url\((.*?)\)', r.text)
        urls = map(str, urls)
        urls = filter(str, urls)
        font_urls.update(urls)

    fonts_map = {font_url.split('.')[-1].lower(): font_url for font_url in font_urls}

    for file_extension, url in fonts_map.items():
        file_path = os.path.join(output_directory, '{output_file_name}.{file_extension}'.format(output_file_name=output_file_name, file_extension=file_extension))
        _download_file(url, file_path)

USER_AGENTS = """
Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.3) Gecko/20090913 Firefox/3.5.3
Mozilla/5.0 (Windows; U; Windows NT 6.1; en; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.1) Gecko/20090718 Firefox/3.5.1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.1 (KHTML, like Gecko) Chrome/4.0.219.6 Safari/532.1
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; InfoPath.2)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Win64; x64; Trident/4.0)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SV1; .NET CLR 2.0.50727; InfoPath.2)Mozilla/5.0 (Windows; U; MSIE 7.0; Windows NT 6.0; en-US)
Mozilla/4.0 (compatible; MSIE 6.1; Windows XP)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2227.0 Safari/537.36
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; da-dk) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Opera/9.80 (Windows NT 6.1; U; es-ES) Presto/2.9.181 Version/12.00
Mozilla/5.0 (Linux; U; Android 2.3.4; fr-fr; HTC Desire Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla/5.0 (Linux; Android 7.0; SAMSUNG SM-N920C Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/6.2 Chrome/56.0.2924.87 Mobile Safari/537.36
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.43 BIDUBrowser/2.x Safari/537.31
Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; GT-I9500 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 MQQBrowser/5.0 QQ-URL-Manager Mobile Safari/537.36
Mozilla/5.0 (Android 8.0.0; Tablet; rv:57.0) Gecko/57.0 Firefox/57.0
Mozilla/5.0 (Android 8.1.0; Mobile; rv:61.0) Gecko/61.0 Firefox/61.0
"""

def _download_file(url, file_path):
    r = requests.get(url)
    r.raise_for_status()
    with open(file_path, 'wb') as f:
        f.write(r.content)

if __name__ == '__main__':
    main()

enter image description here

0
Jossef Harush