Как загрузить несколько форматов веб-шрифта из (официального) репозитория Google Web Fonts?

Я узнал, что Google автоматически обслуживает файлы шрифтов TTF, EOT, WOFF или SVG в зависимости от на браузере/устройстве, к которому он обратился.

Теперь я планирую размещать и передавать файлы шрифтов с самого моего сервера, для чего мне сначала нужно будет загрузить все форматы файлов веб-шрифтов.

Как или где я могу загрузить 4 формата файлов для веб-шрифта, который я хотел бы использовать?

PS: Используя разные браузеры - Chrome, IE9 и Safari (dev - iPhone UA), я смог получить форматы WOFF, EOT и TTF. Однако не повезло с SVG-форматом. Было бы замечательно, если бы был еще более простой способ.

EDIT: О, и, кстати, я знаю, что могу загружать различные форматы из fontsquirrel, но я говорю о загрузка из официального репо здесь.

Ответ 1

Вы можете клонировать каталог веб-сайтов Google по адресу http://code.google.com/p/googlefontdirectory/

Вы также можете получить отдельные файлы шрифтов на http://code.google.com/p/googlefontdirectory/source/browse/#font_name

Ответ 2

======= ОБНОВЛЕНО 2016-05-31 =======

Я сделал крошечный PHP script, чтобы получить ссылки для загрузки из URL-адреса импорта CSS-шрифтов Google, например: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

Вы можете использовать этот инструмент здесь: http://nikoskip.me/gfonts.php

Например, если вы используете указанный URL-адрес импорта, вы получите следующее:

Я устал обновлять этот ответ в каждой новой версии Chrome, потому что они всегда меняют способ обмана строки User Agent, поэтому используйте вместо этого script.

======= OLD SOLUTION =======

Используя DevTools из Chrome, вы можете переопределить User Agent.

Как сделать:

Получить шрифт, который вам нужен на странице Google Fonts.
Вы получите URL-адрес для импорта в свой CSS, например: http://fonts.googleapis.com/css?family=Cabin:500,700,500italic,700italic
Откройте этот URL в своем браузере, и вы увидите полный URL-адрес, где вы можете загрузить шрифт.
Перейдите в Инструменты разработчика (F12) и нажмите ESC
Выберите вкладку "Эмуляция", затем нажмите вкладку "Сеть"
Наконец, на Spoof user agent выберите IE9 для формата EOT, Android 4 для TTF и этой строки UA для 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 (спасибо анонимно)

Ответ 3

Как получить URL-адрес загрузки шрифтов, включая SVG и woff2.

Пользовательские агенты, необходимые для загрузки каждого шрифта, следующие. источник.

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/",
}

Добавьте этих useragents, используя devtool.

источник

теперь вы можете посетить https://fonts.googleapis.com/css?family=Open+Sans и обмануть свой пользовательский агент, загрузить шрифты, посетив url, найденный в @font-face.

В качестве альтернативы google-webfonts-helper делает все для вас. Там отличное сообщение в блоге здесь от разработчика, где я приобрел изображение.

Зачем вам нужен хост?

Всегда используйте обычный CDN, если это возможно, гораздо более вероятно, что ваш шрифт даже не понадобится для загрузки (кеширование браузера).

Если вы беспокоитесь о том, что Google отправляет неправильный шрифт пользователям, скорее всего, потому, что они подменяют свой пользовательский агент, а затем в другом варианте и по-прежнему получают преимущества использования хостинга Google.

Вставьте @font-face самостоятельно, просто используйте приведенные выше шаги, чтобы найти URL-адрес шрифта google и вставьте его в <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>

Это связано с его рисками, поскольку URL-адрес может измениться!

Ответ 4

Я сделал онлайн-клон:)

https://bitbucket.org/Tymek/google-web-fonts/ Там вы идете!

Ответ 5

В любом случае я не являюсь партнером этого бизнеса или веб-сайта, но мне удалось получить все форматы, которые мне нужны на onlinefontconverter.com.

Мне нужны были eot, svg, woff и ttf. У меня уже был ttf. Я загрузил его, и сайт создал все остальное - все через несколько минут.

Ответ 6

Я написал PowerShell script, чтобы автоматически загружать шрифты, обслуживаемые несколькими различными User Agents. Для основного шрифта он получает все четыре формата (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"

script выведет CSS, извлеченный из серверов Google, чтобы помочь вам определить, какой файл является (например, в моем случае шрифт SVG был вытащен как файл с именем "font" ).

Это основано на сценариях bash, опубликованных RichardN и ldeck в блоге Локально кеширование веб-шрифтов Google.

Для справки: ldeck bash script:


#!/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.

Ответ 7

Я написал скрипт на 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()