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

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

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

отличное решение -google-webfonts-помощник .

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

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

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

Edit: переехал в https://github.com/neverpanic/google-font-download

содержимое файла CSS (из URL-адреса include) зависит от того, из какого браузера я его просматриваю. Например, при просмотре в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.

вам понадобится набор форматов веб-шрифтов и Шрифт Белка Webfont Генератор может производить эти.

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

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

Он находится в преждевременной стадии, но его можно найти здесь:DaAwesomeP / php-offline-шрифты

Я 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, а затем использовать onlinefontconverter.com.

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

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

например, если вы используете вышеуказанный URL импорта, вы получите это:

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

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

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

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

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

Е. Г. допустим, вы хотите использовать шрифт робото:

npm install typeface-roboto --save

затем просто импортируйте его в entrypoint вашего приложения (основной файл js):

import 'typeface-roboto'

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

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

• создание подмножеств для каждого поддерживаемого языка
• используйте подмножество unicode-range для экономии полосы пропускания
• удалить вздутие из шрифтов и оптимизировать их для web
• преобразовать шрифты в сжатом формате woff2
• обеспечить .это запасной вариант для старых браузеров
• настройка загрузки и рендеринга шрифтов
• создать файл CSS с правилами @ font-face
• веб-шрифты Self-host или использовать их локально

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

P. S. Вы также можете автоматизировать это с помощью узла.С. API