Как разместить веб-шрифты Google на моем собственном сервере? - PullRequest
260 голосов
/ 23 января 2012

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

Ответы [ 16 ]

207 голосов
/ 02 ноября 2012

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

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

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


Теперь вы также можете загрузить весь набор шрифтов Google через github на их google / font хранилище.Они также предоставляют ~ 360MB 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.

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

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
198 голосов
/ 12 февраля 2015

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

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


129 голосов
/ 04 августа 2015

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

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

59 голосов
/ 19 апреля 2014

Я написал 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

12 голосов
/ 23 ноября 2013

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

6 голосов
/ 28 января 2012

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

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

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

2 голосов
/ 20 апреля 2014

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

Это преждевременный этап, но его можно найти здесь: DaAwesomeP / php-offline-fonts

1 голос
/ 31 декабря 2017

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

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

npm install typeface-roboto --save

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

import 'typeface-roboto'
1 голос
/ 23 марта 2017

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

1 голос
/ 02 февраля 2017

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

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

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

enter image description here

...