Как разместить веб-шрифты Google на моем собственном сервере?


271

Мне нужно использовать некоторые шрифты Google в интранет-приложении. Клиенты могут иметь или не иметь подключение к интернету. Читая условия лицензии, оказывается, что это разрешено законом.


6
Я понимаю, что это не так просто, как загрузить один файл и сохранить его. Каждый браузер поддерживает свой формат шрифта, и Google не предоставляет прямой и простой способ получить все необходимые файлы, чтобы шрифт работал правильно во всех браузерах.
Самарт Бхаргава

1
Вы получаете все URI из связанной таблицы стилей.
fuxia

38
Да, я могу сам разобраться во всех деталях или задать вопрос, чтобы узнать, делал ли кто-то это раньше и у кого есть опыт и сценарии,
которыми

2
Что ж, Google возвращает разные ответы в fonts.googleapis.com/css?зависимости от ваших заголовков UA (читай: ваш браузер). ➝ Таким образом, они предоставляют только то, что нужно текущему браузеру. Если кто-то хочет получить все необходимые шрифты (или даже просто URL-адреса), вам потребуется несколько загрузок файла CSS из разных браузеров, соответственно. с разными поддельными заголовками, чтобы получить все, что нужно.
Фрэнк Нок

Используйте этот инструмент: npmjs.com/package/font-ranger
Do Async

Ответы:


218

Пожалуйста, имейте в виду, что мой ответ сильно постарел.

Ниже приведены другие, более технически сложные ответы, например:

поэтому не позволяйте тому факту, что этот принятый в настоящее время ответ создает у вас впечатление, что он по-прежнему остается лучшим.


Теперь вы также можете скачать весь набор шрифтов Google через github в их хранилище google / font . Они также предоставляют снимок размером ~ 420 МБ в виде почтовых индексов своих шрифтов .


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

На странице загрузки веб-шрифтов Google вы найдете следующую ссылку:

http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal

Он ссылается на CSS, определяющий шрифты через набор @font-faceопределений.

Откройте его в браузере, чтобы скопировать и вставить их в свой собственный CSS и изменить URL-адреса, включив в них правильный файл шрифта и типы форматов.

Итак, это:

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: 700;
  src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

становится так:

/* Your local CSS File */
@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: 700;
    src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}

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

Кроме того, мне пришлось добавить .htaccessв свой каталог файл со шрифтами, содержащими типы mime, чтобы избежать появления ошибок в Chrome Dev Tools.

Для этого решения нужен только истинный тип, но определение more не повредит, если вы хотите включить разные шрифты, например font-awesome.

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

37
Вы не ограничены TrueType, вам просто нужно также загрузить файлы .woff, т.е. вставьте «http: //themes.googleusercontent.com/static/fonts/cantarell/v3/...80lGh-uXM.woff» в веб-браузер, сохраните его как «/fonts/Cantarell-Bold.woff» и обновите css to match (url ('/ fonts / Canterell-Bold.woff'))
Энтони Бриггс

2
Есть причина, почему Google предоставляет несколько форматов шрифтов - TrueType не работает на старых браузерах . WOFF - это стандарт W3C.
Майкл Макгиннис,

3
Прокрутите вниз до решения bash-скрипта - круто!
Доктор Макс Фелькель

3
Файл меняет содержимое в зависимости от используемого браузера.
Кр

3
Этот ответ сложнее развернуть, чем альтернативы, перечисленные ниже; это также технически некорректно в нескольких отношениях (без ограничения TTF, TTF - плохая идея, это даст разные результаты для каждого браузера, вы не можете размещать шрифты где-либо публично, так как применяется одинаковое происхождение). Пожалуйста, не делайте этого, используйте один из ответов ниже.
Робин Бержон

202

Существует инструмент localfont.com, который поможет вам загрузить все варианты шрифтов. Он также генерирует соответствующий CSS для реализации. Устаревшее

localfont не работает Вместо этого, как предлагает Дамир , вы можете использовать google-webfonts-helper



Хотя это и фантастично, но если вам нужны версии вашего шрифта на других языках, вам нужно найти другое решение
anges244

А как насчет разных наборов символов?
vitro

1
Здесь разработчик Google говорит, что сам хостинг шрифтов Google имеет свои недостатки , вместо этого проверьте эти советы, чтобы использовать CDN шрифтов Google и увеличить скорость страницы.
Shaijut

@PauloCoghi Инструмент может сообщать, что веб-сайт доступен, но очевидно, что что-то не так, поскольку я и многие другие не можем его просмотреть.
Lawyerson

148

Отличным решением является google-webfonts-helper .

Позволяет выбрать более одного варианта шрифта, что экономит много времени.


Великолепные инструменты! Я люблю это. Вы можете просмотреть предварительный просмотр шрифта и загрузить все необходимые файлы одним щелчком мыши.
Cuixiping

Очень хороший инструмент. Работает очень хорошо и позволяет загружать latin-extшрифты тоже.
piotrekkr

3
Это лучший вариант. Он делает все, вы даже можете указать префикс папки шрифтов.
Мацей Кравчик

63

Я написал сценарий bash, который извлекает файл CSS на серверах Google с различными пользовательскими агентами, загружает различные форматы шрифтов в локальный каталог и записывает файл CSS, включающий их. Обратите внимание, что для скрипта требуется Bash версии 4.x.

См. Https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ для сценария (я не воспроизводю его здесь, поэтому мне нужно только обновить его в одно место, когда мне нужно).

Изменить. Перемещено на https://github.com/neverpanic/google-font-download.


4
Это более чем круто! (Я надеюсь, что это работает хорошо, еще не проверено). Я искал что-то вроде этой формы время от времени на протяжении многих лет. Без шуток, я даже начал писать свой собственный сценарий, который далек от завершения. Сногсшибательно, что так мало людей хотят этого. Google скрывает эти шрифты за сгенерированными строками и не использует открытые исходные тексты для файлов webfont в репозитории только в формате ttf. Они хотят, чтобы мы использовали их шрифты, они хотят, чтобы мы использовали их серверы, потому что они злоупотребляют этим для отслеживания людей. И даже самые осведомленные люди встраивают шрифты с сервера googles.
Redanimalwar

1
Мое единственное беспокойство - фактические лицензии шрифта, не очень тщательно изученные ими. Я знаю только то, что лицензии на шрифты отличаются от лицензий GPL или MIT. Итак, действительно ли мы по закону можем получать эти шрифты с серверов Google и обслуживать их самостоятельно? Опять же, я ни на минуту не верю, что Google отдает все эти шрифты просто ради того, чтобы сделать мир лучше, они фактически платят разработчикам за создание для них открытых шрифтов, чтобы они наверняка что-то получили, много данных. И если это не конфиденциальность вашей до, вы можете проверить эти шрифты локально без Интернета, таким образом.
Redanimalwar

2
За этот ответ следует проголосовать больше, поскольку этот скрипт может загружать все форматы шрифтов и подмножеств в отличие от localfont.com.
piotrekkr

Я знаю, что вы примете меня за ленивого человека, но как обычного пользователя Windows, это отстой, когда приходится его компилировать и т. Д., Чтобы иметь возможность его использовать ...
Лукас Бустаманте

@LucasB Компиляция не включена. Это скрипт bash. Я знаю, что Windows не поставляется с Bash, но не стесняйтесь повторно реализовать это способом, который поддерживает Windows. Это не было частью моего сценария использования, поэтому я не тратил на это времени.
Neverpanic

14

Содержимое файла CSS (из включенного URL) зависит от того, в каком браузере я его просматриваю. Например, при переходе по адресу http://fonts.googleapis.com/css?family=Open+Sans с использованием Chrome файл содержал только ссылки WOFF. Используя Internet Explorer (ниже), он включал EOT и WOFF. Я вставил все ссылки в свой браузер, чтобы загрузить их.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

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


1
+1 за ссылку на эту статью, которая объясняет «универсальный» код CSS для использования и «сокращенный» для современных браузеров!
ItalyPaleAle

2
Поэтому мне нужно будет аккуратно обслуживать браузер в другом формате. Я знаю, что это крайне обескураживает, но мы предоставляем нашу страницу некоторым китайским клиентам, и это главная причина, по которой мы хотим ее разместить. Они заблокировали большинство ресурсов Google.
Лайонел Чан

6

Это разрешено законом, если вы придерживаетесь условий лицензии шрифта - обычно OFL.

Вам понадобится набор форматов веб-шрифтов, и Font Squirrel Webfont Generator может их создавать.

Но OFL требовал, чтобы шрифты были переименованы, если они были изменены, и использование генератора означает изменение их.


Или, в зависимости от шрифта, вы можете просто получить комплект Webfont прямо из белки шрифта. fontsquirrel.com/fonts/open-sans
Джек Фрост,

3

У меня есть скрипт, написанный на PHP, похожий на скрипт @neverpanic, который автоматически загружает из Google как CSS, так и шрифты ( как подсказки, так и подсказки ). Затем он использует правильный CSS и шрифты с вашего собственного сервера на основе пользовательского агента. Он хранит свой собственный кеш, поэтому шрифты и CSS пользовательского агента будут загружаться только один раз.

Это преждевременная стадия, но ее можно найти здесь: DaAwesomeP / php-offline-fonts


2

Поскольку вы хотите разместить все шрифты (или некоторые из них) на своем собственном сервере, вы загружаете шрифты из этого репозитория и используете их по своему усмотрению: https://github.com/praisedpk/Local-Google-Fonts

Если вы просто хотите сделать это, чтобы устранить проблему с кэшированием в браузере, которая поставляется с Google Fonts, вы можете использовать альтернативные шрифты CDN и включить шрифты как:

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

Или конкретный шрифт, как:

<link href="https://pagecdn.io/lib/easyfonts/lato.css" rel="stylesheet" />

1

Я использовал grunt-local-googlefont в задании grunt.

module.exports = function(grunt) {

    grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),

        "local-googlefont" : {
            "opensans" : {
                "options" : {
                    "family" : "Open Sans",
                    "sizes" : [
                        300,
                        400,
                        600
                    ],
                    "userAgents" : [
                        "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)",  //download eot
                        "Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf
                        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2
                    ],
                    "cssDestination" : "build/fonts/css",
                    "fontDestination" : "build/fonts",
                    "styleSheetExtension" : "css",
                    "fontDestinationCssPrefix" : "fonts"

                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-local-googlefont');
 };

Затем, чтобы получить их:

grunt local-googlefont:opensans

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


1

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



1

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

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

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

введите описание изображения здесь


1

Если вы используете Webpack, вас может заинтересовать этот проект: https://github.com/KyleAMathews/typefaces

Например, вы хотите использовать шрифт Roboto:

npm install typeface-roboto --save

Затем просто импортируйте его в точку входа вашего приложения (основной файл js):

import 'typeface-roboto'

1

Вы можете следовать сценарию, который разработан с использованием PHP. Где вы можете скачать любые шрифты Google с помощью скрипта. Он загрузит шрифты и создаст файл CSS и архив в zip.
Вы можете скачать исходный код с GitHub https://github.com/sourav101/google-fonts-downloader

$obj = new GoogleFontsDownloader;

if(isset($_GET['url']) && !empty($_GET['url']))
{
    $obj->generate($_GET['url']);
}

if(isset($_GET['download']) && !empty($_GET['download']) && $_GET['download']=='true')
{
    $obj->download();
}

/**
* GoogleFontsDownloader
* Easy way to download any google fonts.
* @author     Shohrab Hossain
* @version    1.0.0 
*/
class GoogleFontsDownloader
{
    private $url      = '';
    private $dir      = 'dist/';
    private $fontsDir = 'fonts/';
    private $cssDir   = 'css/';
    private $fileName = 'fonts.css';
    private $content  = '';
    private $errors   = '';
    private $success  = '';
    public  $is_downloadable  = false;

    public function __construct()
    {
        ini_set('allow_url_fopen', 'on');
        ini_set('allow_url_include', 'on');
    }

    public function generate($url = null)
    {
        if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) 
        {
            $this->errors .= "<li><strong>Invalid url!</strong> $url</li>";
        }
        else
        {
            $this->url = $url;
            // delete previous files
            $this->_destroy();
            // write font.css
            $this->_css();
            // write fonts
            $this->_fonts();
            // archive files
            $this->_archive();
        }  
        // show all messages
        $this->_message();
    }

    public function download()
    { 
        // Download the created zip file
        $zipFileName = trim($this->dir, '/').'.zip';
        if (file_exists($zipFileName))
        {
            header("Content-type: application/zip");
            header("Content-Disposition: attachment; filename = $zipFileName");
            header("Pragma: no-cache");
            header("Expires: 0");
            readfile("$zipFileName");

            // delete file 
            unlink($zipFileName);
            array_map('unlink', glob("$this->dir/*.*"));
            rmdir($this->dir);

        } 
    }   

    private function _archive()
    {
        if (is_dir($this->dir))
        {
            $zipFileName = trim($this->dir, '/').'.zip';
            $zip = new \ZipArchive(); 
            if ($zip->open($zipFileName, ZipArchive::CREATE) === TRUE) 
            {
                $zip->addGlob($this->dir. "*.*");
                $zip->addGlob($this->dir. "*/*.*");
                if ($zip->status == ZIPARCHIVE::ER_OK)
                {
                    $this->success .= '<li>Zip create successful!</li>';
                    $this->is_downloadable = true;
                }
                else 
                {
                    $this->errors .= '<li>Failed to create to zip</li>';
                } 
            } 
            else 
            {
                $this->errors .= '<li>ZipArchive not found!</li>';
            }  
            $zip->close(); 
        }
        else
        {
            $this->errors .= "<li><strong>File</strong> not exists!</li>";
        } 
    }   

    private function _css()
    {  
        $filePath = $this->dir.$this->cssDir.$this->fileName;
        $content  = $this->_request($this->url);
        if (!empty($content))
        {
            if (file_put_contents($filePath, $content))
            {
                $this->success .= "<li>$this->fileName generated successful!</li>";
                $this->content = $content; 
            }
            else
            {
                $this->errors .= '<li>Permission errro in $this->fileName! Unable to write $filePath.</li>';
            }
        }
        else
        {
            $this->errors .= '<li>Unable to create fonts.css file!</li>';
        }
    }

    private function _fonts()
    {
        if (!empty($this->content))
        {
            preg_match_all('#\bhttps?://[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/))#', $this->content, $match);
            $gFontPaths = $match[0];
            if (!empty($gFontPaths) && is_array($gFontPaths) && sizeof($gFontPaths)>0)
            {
                $count = 0;
                foreach ($gFontPaths as $url) 
                {
                    $name     = basename($url);
                    $filePath = $this->dir.$this->fontsDir.$name;
                    $this->content = str_replace($url, '../'.$this->fontsDir.$name, $this->content);

                    $fontContent  = $this->_request($url);
                    if (!empty($fontContent))
                    {
                        file_put_contents($filePath, $fontContent);
                        $count++;
                        $this->success .= "<li>The font $name downloaded!</li>";
                    }
                    else
                    {
                        $this->errors .= "<li>Unable to download the font $name!</li>";
                    } 
                }

                file_put_contents($this->dir.$this->cssDir.$this->fileName, $this->content);
                $this->success .= "<li>Total $count font(s) downloaded!</li>";
            }
        }
    }

    private function _request($url)
    {
        $ch = curl_init(); 
        curl_setopt_array($ch, array(
            CURLOPT_SSL_VERIFYPEER => FALSE,
            CURLOPT_HEADER         => FALSE,
            CURLOPT_FOLLOWLOCATION => TRUE,
            CURLOPT_URL            => $url,
            CURLOPT_REFERER        => $url,
            CURLOPT_RETURNTRANSFER => TRUE,
        ));
        $result = curl_exec($ch);
        curl_close($ch);

        if (!empty($result))
        {
            return $result;
        } 
        return false;
    }

    private function _destroy()
    {
        $cssPath = $this->dir.$this->cssDir.$this->fileName;
        if (file_exists($cssPath) && is_file($cssPath))
        {
            unlink($cssPath);
        } 
        else
        {
            mkdir($this->dir.$this->cssDir, 0777, true);
        }

        $fontsPath = $this->dir.$this->fontsDir;
        if (!is_dir($fontsPath))
        {
            mkdir($fontsPath, 0777, true);
        }
        else
        {
            array_map(function($font) use($fontsPath) {
                if (file_exists($fontsPath.$font) && is_file($fontsPath.$font))
                {
                    unlink($fontsPath.$font);
                }
            }, glob($fontsPath.'*.*')); 
        }
    }

    private function _message()
    {
        if (strlen($this->errors)>0)
        {
            echo "<div class='alert alert-danger'><ul>$this->errors</ul></div>";
        }  
        if (strlen($this->success)>0)
        {
            echo "<div class='alert alert-success'><ul>$this->success</ul></div>";
        } 
    } 
}

0

В дополнение к k0pernicus я хотел бы предложить лучше обслуживаемый местный . Это также скрипт bash (v4), позволяющий операторам веб-серверов загружать и обслуживать веб-шрифты Google со своего собственного веб-сервера. Но в дополнение к другому bash-скрипту, он позволяет пользователю полностью автоматизировать (через cron и т. Д.) Обслуживание современных файлов шрифтов и css-файлов.


0

Существует очень простой сценарий, написанный на простом Java, для загрузки всех шрифтов по ссылке Google Web Font (поддерживается несколько шрифтов). Он также загружает файл CSS и адаптирует его к локальным файлам. Пользовательский агент может быть адаптирован для получения других файлов, кроме только WOFF2. См. Https://github.com/ssc-hrep3/google-font-download.

Полученные файлы могут быть легко добавлены в процесс сборки (например, сборка из веб-пакета vue-webpack).


0

Вы можете скачать исходные шрифты с https://github.com/google/fonts

После этого используйте font-rangerинструмент, чтобы разбить большой шрифт Unicode на несколько подмножеств (например, латинский, кириллический). Вы должны сделать следующее с инструментом:

  • Создайте подмножества для каждого языка, который вы поддерживаете
  • Используйте подмножество Unicode-диапазона для экономии пропускной способности
  • Удалите раздувание из ваших шрифтов и оптимизируйте их для веб
  • Конвертируйте ваши шрифты в сжатый формат woff2
  • Обеспечить .woff откат для старых браузеров
  • Настройка загрузки и рендеринга шрифтов
  • Создать CSS-файл с правилами @ font-face
  • Самостоятельно размещать веб-шрифты или использовать их локально

Font-Ranger : https://www.npmjs.com/package/font-ranger

PS Вы также можете автоматизировать это, используя Node.js API

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.