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

Question

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

Answer 1

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

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

• localfont
• neverpanic / Google-шрифты скачать
• Google-WebFont-помощник

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

---

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

---

Сначала вы загружаете выбранный вами шрифт в виде упакованного пакета, предоставляя вам набор шрифтов истинного типа. Скопируйте их где-нибудь публично, куда вы можете сослаться с вашего 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

Answer 2

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

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

---

Answer 3

Отличное решение - https://google-webfonts-helper.herokuapp.com/.

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

Answer 4

Я написал сценарий 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

Answer 5

Содержимое файла 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 автоматически ссылается на правильные типы шрифтов для этого браузера.

Answer 6

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

Вам понадобится набор форматов веб-шрифтов, и http://www.fontsquirrel.com/tools/webfont-generator может их создавать.

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

Answer 7

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

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

Answer 8

Самый простой подход - использование google-webfonts-helper

Допустим, мы хотим разместить шрифт Red Rose:

• Откройте https://google-webfonts-helper.herokuapp.com/fonts и отфильтруйте требуемый шрифт слева вверху (введите Red Rose и введите..)
• Выберите кодировку (по умолчанию - латинский; выберите другие, например latin-ext, если вам нужна расширенная поддержка)
• Выберите стили (это умолчанию используется именно регулярный)
• От Copy CSS вкладка
  • Выбрать Modern Browser если вы хотите поддерживать только современные браузеры (woff2, woff)
  • Выбрать Best Support если вы хотите поддерживать все браузеры (я выбрал это - woff2, woff,ttf,svg,eot)
• Если ваши файлы шрифтов не находятся в ../fonts/ path, вы можете отредактировать его, чтобы он представлял ваш фактический путь (для меня это был ../assets/fonts/)
• Скопируйте CSS и сохраните для использования в будущем.
• Загрузите zip-файл с именем red-rose-v1-latin-ext_latin; разархивируйте его и поместите все шрифты прямо в свойassets/fonts каталог (на основе того, что вы дали ранее)
• В таблицу стилей, в которую вы хотите встроить, вставьте скопированный CSS. Если вы выберете эти параметры, это будет выглядеть так, как показано ниже.

/* red-rose-regular - latin-ext_latin */
@font-face {
  font-family: 'Red Rose';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Red Rose Regular'), local('RedRose-Regular'),
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.svg#RedRose') format('svg'); /* Legacy iOS */
}

/* Red Rose will now be available for use in your stylesheet, provide this font */

:root {
  font-family: 'Red Rose', cursive, sans-serif;
}

• Вот и все!

Answer 9

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

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

npm install typeface-roboto --save

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

import 'typeface-roboto'

Answer 10

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

Answer 11

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

Answer 12

Мое решение состояло в том, чтобы загрузить файлы TTF из веб-шрифтов Google, а затем использовать https://onlinefontconverter.com/.

Answer 13

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

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

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

Answer 14

Я использовал https://github.com/cgoessen/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

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

Answer 15

Вы можете следовать сценарию, разработанному с использованием PHP. Где можно скачать любые шрифты Google с помощью скрипта. Он загрузит шрифты и создаст файл CSS и заархивирует его.
Вы можете скачать исходный код с 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>";
        } 
    } 
}

Answer 16

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

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

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

---

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

PS Вы также можете автоматизировать это с помощью Node.js API

Answer 17

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

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

Answer 18

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

Answer 19

Если вы используете Nuxt, вы можете использовать для этой цели специальный модуль: https://github.com/nuxt-community/google-fonts-module. По мне, он работает намного лучше, чем помощник по веб-шрифтам, у которого часто возникали проблемы с загрузкой шрифты во время сборки и созданные файлы CSS без диапазонов Unicode.