Мне нужно использовать некоторые шрифты Google в приложении для интрасети. Клиенты могут иметь или не иметь интернет-соединение. Читая условия лицензии, представляется, что ее юридически разрешено.
Как разместить веб-шрифты google на моем собственном сервере?
Ответ 1
Помните, что мой ответ сильно постарел.
Ниже приведены другие, более технически сложные ответы, например:
поэтому не позволяйте тому факту, что этот принятый в настоящее время ответ создает у вас впечатление, что он все еще лучший.
Теперь вы также можете загрузить весь набор шрифтов 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
Ответ 2
Существует инструмент localfont.com, который поможет вам загрузить все варианты шрифтов. Он также генерирует соответствующий CSS для реализации. устарело
localfont не работает вместо этого, как предлагает Дамир, вы можете использовать google-webfonts-helper
Ответ 3
Отличное решение google-webfonts-helper.
Он позволяет выбрать более одного варианта шрифта, что экономит много времени.
Ответ 4
Я написал bash script, который извлекает файл CSS на серверах Google различными агентами пользователя, загружает различные форматы шрифтов в локальный каталог и записывает в него файл CSS. Обратите внимание, что для script требуется Bash версия 4.x.
Смотрите https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ для script (я не воспроизвожу его здесь, поэтому мне нужно только обновить его в одном месте, когда Мне нужно).
Изменить: Переместился на https://github.com/neverpanic/google-font-download
Ответ 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 Web Fonts ( размещенный Google), Google автоматически ссылается на правильные типы шрифтов для этого браузера.
Ответ 6
Это законно разрешено, если вы придерживаетесь условий лицензии на шрифт - обычно это OFL.
Вам понадобится набор форматов веб-шрифтов, и Font Squirrel Webfont Generator может их создать.
Но OFL требовал, чтобы шрифты были переименованы, если они были изменены, и использование средств генерации, модифицирующих их.
Ответ 7
У меня есть script, написанный на PHP, похожий на @neverpanic, который автоматически загружает как CSS, так и шрифты (как намеченные, так и непроверенные) от Google. Затем он обслуживает правильные CSS и шрифты с вашего собственного сервера на основе User Agent. Он хранит свой собственный кеш, поэтому шрифты и CSS User Agent будут загружаться только один раз.
Он находится на преждевременной стадии, но его можно найти здесь: DaAwesomeP/php-offline-fonts
Ответ 8
Я использовал 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
Обратите внимание: я использую вилку из оригинала, которая работает лучше при извлечении шрифтов с пробелами в именах.
Ответ 9
Вы можете загружать все варианты формата шрифта прямо из Google и включать их в свой css для обслуживания с вашего сервера. Таким образом, вам не нужно беспокоиться о том, что Google отслеживает пользователей вашего сайта. Однако недостаток может замедлить вашу скорость обслуживания. Шрифты довольно требовательны к ресурсам. Я еще не делал никаких тестов в этом выпуске, и задаюсь вопросом, есть ли у кого-то подобные мысли.
Ответ 10
Моим решением было загрузить файлы TTF из веб-шрифтов google, а затем использовать onlinefontconverter.com.
Ответ 11
Я сделал крошечный PHP script, чтобы получить ссылки для загрузки из URL-адреса импорта CSS-шрифтов Google, например: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic
Вы можете использовать этот инструмент здесь: http://nikoskip.me/gfonts.php
Например, если вы используете указанный URL-адрес импорта, вы получите следующее:
Ответ 12
Если вы хотите разместить все шрифты (или некоторые из них) на своем собственном сервере, скачайте шрифты из этого репозитория и используйте их так, как вы хотите: 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" />
Ответ 13
Если вы используете Webpack, вас может заинтересовать этот проект: https://github.com/KyleAMathews/typefaces
Например. скажем, вы хотите использовать шрифт Roboto:
npm install typeface-roboto --save
Затем просто импортируйте его в точку входа вашего приложения (основной файл js):
import 'typeface-roboto'
Ответ 14
В дополнение к k0pernicus я хотел бы предложить best-served-local. Он также поддерживает bash (v4) script, чтобы позволить операторам веб-сервера загружать и обслуживать веб-шрифты Google со своего веб-сервера. Но в дополнение к другому bash script он позволяет пользователю полностью автоматизировать (через cron и т.д.) Обслуживание современных файлов шрифтов и css файлов.
Ответ 15
Существует очень простой script, написанный на простой Java, для загрузки всех шрифтов из ссылки Google Web Font (поддерживается несколько шрифтов). Он также загружает файл CSS и адаптирует его к локальным файлам. Пользовательский агент может быть адаптирован для получения других файлов, кроме только WOFF2. См. https://github.com/ssc-hrep3/google-font-download
Полученные файлы могут быть легко добавлены в процесс сборки (например, создание веб-пакета, например vue-webpack).
Ответ 16
Вы можете скачать исходные шрифты с https://github.com/google/fonts
После этого используйте инструмент font-ranger, чтобы разбить большой шрифт Unicode на несколько подмножеств (например, латинский, кириллический). Вы должны сделать следующее с помощью инструмента:
- Создайте подмножества для каждого языка, который вы поддерживаете
- Используйте подмножество Юникод-диапазона для экономии пропускной способности
- Удалите раздувание со своих шрифтов и оптимизируйте их для Интернета
- Конвертируйте ваши шрифты в сжатый формат woff2
- Предоставить запасной вариант .woff для старых браузеров
- Настроить загрузку и отображение шрифтов
- Создать файл CSS с правилами @font-face
- Самостоятельно размещать веб-шрифты или использовать их локально
Font-Ranger: https://www.npmjs.com/package/font-ranger
Постскриптум Вы также можете автоматизировать это с помощью API Node.js