Як розмістити веб-шрифти google на власному сервері?

Мені потрібно використовувати кілька шрифтів google в додатку інтранет. Клієнти можуть мати або не мати підключення до Інтернету. Читаючи умови ліцензії, виявляється, що це законодавчо дозволено.

Будь ласка, майте на увазі, що моя відповідь давно постаріла.

Нижче є інші більш складні технічно відповіді, наприклад:

• neverpanic / google-font-download
• google-webfont-helper
• localfont

тому не дозволяйте, щоб ця відповідь прийнято в даний час, створює враження, що це все-таки найкраще.

Також ви можете також завантажити весь набір шрифтів google через на github у їх сховищі google / font . Вони також пропонують ~ 420 Мб zip-знімок своїх шрифтів .

Ви спочатку завантажуєте свій вибір шрифту у вигляді пакету на блискавці, надаючи вам купу шрифтів справжнього типу. Скопіюйте їх кудись загальнодоступними, десь ви можете зв’язатись зі свого css.

На сторінці завантаження google webfont ви знайдете посилання для включення на зразок:

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

Для цього рішення потрібен лише справжній тип, але визначити більше не завадить, коли ви також хочете включити різні шрифти, як-от font-awesome.

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

Існує інструмент localfont.com, який допоможе вам завантажити всі варіанти шрифту. Він також генерує відповідний CSS для впровадження. застарілий

localfont вниз. Натомість, як пропонує Дамір , ви можете використовувати google-webfonts-helper

Відмінне рішення - Google-webfonts-helper .

Це дозволяє вибрати більше одного варіанту шрифту, що економить багато часу.

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

Вміст файлу 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 автоматично посилається на правильні типи шрифтів для цього веб-переглядача.

Це дозволено юридично до тих пір, поки ви дотримуєтесь умов ліцензії шрифту - як правило, OFL.

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

Але OFL вимагає перейменування шрифтів, якщо вони модифіковані, а використання генератора означає їх модифікацію.

У мене написаний на PHP скрипт, подібний до сценарію @neverpanic, який автоматично завантажує з Google і CSS, і шрифти ( як підказки, так і невідомі ). Потім він обслуговує правильний CSS та шрифти з вашого власного сервера на основі User Agent. Він зберігає власний кеш, тому шрифти та CSS користувача-агента завантажуватимуться лише один раз.

Це в передчасній стадії, але його можна знайти тут: DaAwesomeP / php-offline-шрифти

Оскільки ви хочете розмістити всі шрифти (або деякі з них) на своєму власному сервері, ви завантажуєте шрифти з цього репо і використовуєте його так, як вам потрібно: 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" />

Я використовував grunt-local-googlefont у завданні грунту .

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

Зауважте, я використовую вилку з оригіналу, яка краще працює при пошуку шрифтів з пробілами в їх назвах.

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

Моїм рішенням було завантажити файли TTF з веб-шрифтів google, а потім використовувати webfontconverter.com .

Я створив крихітний сценарій PHP, щоб отримати посилання для завантаження з URL-адреси імпорту CSS Google Fonts, наприклад: https://fonts.googleapis.com/css?family=Roboto:200,700|Slabo+27px|Lato:200,300italic,900italic

Ви можете скористатися цим інструментом тут: http://nikoskip.me/gfonts.php

Наприклад, якщо ви використовуєте вказану вище імпортну URL-адресу, ви отримаєте це:

Якщо ви використовуєте Webpack, цей проект може вас зацікавити: https://github.com/KyleAMathews/typefaces

Наприклад, ви хочете використовувати шрифт Roboto:

npm install typeface-roboto --save

Потім просто імпортуйте його в точку входу програми (головний js-файл):

import 'typeface-roboto'

Ви можете слідувати сценарію, розробленому за допомогою 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>";
        } 
    } 
}

Окрім k0pernicus, я хотів би запропонувати найкраще місцевий сервіс . Це також bash (v4) сценарій, який дозволяє операторам веб-серверів завантажувати та обслуговувати веб-шрифти Google із власного веб-сервера. Але на додаток до іншого скрипту bash, він дозволяє користувачеві повністю автоматизувати (через cron і подібне) обслуговування сучасних файлів шрифтів та css-файлів.

Існує дуже простий скрипт, написаний на звичайній Java для завантаження всіх шрифтів із посилання на веб-шрифт Google (підтримується кілька шрифтів). Він також завантажує файл CSS і адаптує його до локальних файлів. Користувацький агент може бути адаптований для отримання також інших файлів, ніж тільки WOFF2. Дивіться https://github.com/ssc-hrep3/google-font-download

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

Ви можете завантажити вихідні шрифти з https://github.com/google/fonts

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

• Створіть підмножини для кожної підтримуваної мови
• Використовуйте підзадачу діапазону unicode для збереження пропускної здатності
• Видаліть шматок із своїх шрифтів та оптимізуйте їх для Інтернету
• Перетворіть ваші шрифти у стислий формат woff2
• Забезпечте запасний варіант для старих веб-переглядачів
• Налаштуйте завантаження та візуалізацію шрифту
• Створіть файл CSS за допомогою правил @ font-face
• Самостійне розміщення веб-шрифтів або використання їх локально

Шрифт-рейнджер : https://www.npmjs.com/package/font-ranger

PS Ви також можете автоматизувати це за допомогою API Node.js