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

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

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

---

отличное решение google-webfonts-helper .

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

Я написал 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-скрипт, чтобы получить ссылки для загрузки из Google Fonts CSS import URL, например: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

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

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

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

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

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

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

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

npm install typeface-roboto --save

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

import 'typeface-roboto'

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

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

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

---

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

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