Загрузка шрифта Google и настройка автономного сайта, который его использует

139

У меня есть шаблон, и он имеет ссылку на шрифт Google, как это:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

Как я могу загрузить его и настроить для использования на моих страницах, которые постоянно работают в автономном режиме?

user2147954
источник

Ответы:

101

Просто зайдите в Google Fonts - http://www.google.com/fonts/ , добавьте понравившийся шрифт в свою коллекцию и нажмите кнопку загрузки. А затем просто используйте @fontface для подключения этого шрифта к вашей веб-странице. Кстати, если вы откроете ссылку, которую вы используете, вы увидите пример использования @fontface

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Для примера

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Просто измените URL-адрес на локальную ссылку в файле шрифта, который вы скачали.

Вы можете сделать это еще проще.

Просто скачайте файл, на который вы ссылаетесь:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Назовите его opensans.css или около того.

Затем просто измените ссылки в url () на путь к файлам шрифтов.

А затем замените пример строки на:

<link href='opensans.css' rel='stylesheet' type='text/css'>
Дмитрий Бутенко
источник
8
Я до сих пор не получил
user2147954
22
В отличие от шрифтов Google, когда сервер от Google, этот подход опирается только на формат WOFF и, следовательно, существенно более ограничен. Кроме того, Google распространяет их шрифты в формате TTF, а не в формате WOFF.
Юкка К. Корпела
24
Будьте осторожны, fonts.googleapis генерирует разные объявления @ font-face для разных браузеров.
Хусейн Яглы
7
Это НЕ правильно, потому что Google отправляет файл CSS для браузера из fonts.googleapis.com/… Поэтому, если вы откроете его в Chrome, вы получите другое @ font-face, чем при открытии его в IE или любом другом браузере. Например, шрифты WOFF2 будут отправляться только в Firefox и Chrome, так как другие браузеры их не поддерживают (пока). caniuse.com/#feat=woff2
Йост ван дер Лаан
4
Игнорируйте этот ответ независимо от принятого статуса. Это неверно, как указал здесь Йост ван дер Лаан. Посмотрите ответ с высокими оценками @ marco-kerwitz ниже, который должен быть помечен как правильный ответ.
Appurist - Пол W
324

Проверьте помощник веб-шрифтов Google

Он позволяет вам загружать каждый веб-шрифт Google и предлагает код CSS для реализации. Этот инструмент также позволяет просто загрузить все форматы одновременно без хлопот.

Всегда хотел узнать, где Google размещает свои веб-шрифты? Этот сервис может быть полезен, если вы хотите загрузить все файлы .eot, .woff, .woff2, .svg, .ttf варианта шрифта непосредственно из Google (обычно ваш User-Agent определяет лучший формат).

Также взгляните на их страницу Github .

Марко Кервитц
источник
20
Мне просто интересно, почему Google не сделал это в первую очередь? +1
tftd
3
Это прекрасно работает, убедитесь, что вы объявляете соответствующий тип контента при линковке из локального файлаContent-type: text/css; charset: UTF-8
Clain Dsilva
Если вы используете веб-пакет или какой-либо другой инструмент, который упаковывает импорт CSS / SASS, тогда этот подход является лучшим. Этот вопрос описывает процесс более подробно.
Пейс
Большое спасибо за подсказку. Спас мой день!
евника
1
one-liner , запустите в целевом каталоге:curl -o f.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto?download=zip&subsets=latin,latin-ext&variants=regular,700" && unzip f.zip && rm f.zip
smnbbrv
43

Нашел пошаговый способ добиться этого (для 1 шрифта):
(по состоянию на 9 сентября 2013 г. )

  1. Выберите свой шрифт на странице http://www.google.com/fonts.
  2. Добавьте нужный в свою коллекцию, используя синюю кнопку «Добавить в коллекцию»
  3. Нажмите кнопку «Просмотреть все стили» рядом с кнопкой «Удалить из коллекции» и убедитесь, что вы выбрали другие стили, которые вам также могут понадобиться, например «жирный» ...
  4. Нажмите кнопку «Использовать» на вкладке в правом нижнем углу страницы.
  5. Нажмите кнопку загрузки сверху со стрелкой вниз
  6. Нажмите на «почтовый файл» во всплывающем сообщении, которое появляется
  7. Нажмите кнопку «Закрыть» во всплывающем окне
  8. Медленно прокручивайте страницу, пока не увидите 3 вкладки «Standrd | @import | Javascript»
  9. Нажмите на вкладку "@import"
  10. Выберите и скопируйте URL между 'url('и')'
  11. Скопируйте его в адресную строку в новой вкладке и перейдите туда
  12. Выполните «Файл> Сохранить страницу как ...» и назовите ее «selectedfontname.css» (замените соответственно)
  13. Распакуйте скачанный файл .zip шрифтов (должен быть извлечен .ttf)
  14. Перейдите на « http://ttf2woff.com/ » и конвертируйте любой .ttf, извлеченный из zip, в .woff
  15. Отредактируйте desiredfontname.cssи замените любой URL внутри него [между 'url('и ')'] соответствующим преобразованным файлом .woff, который вы получили на ttf2woff.com; путь, который вы пишете, должен соответствовать вашему серверу doc_root
  16. Сохраните файл и переместите его в его окончательное место и напишите соответствующий <link/>тег CSS, чтобы импортировать его на свою HTML-страницу.
  17. Отныне обращайтесь к этому шрифту по его font-familyназванию в ваших стилях

Вот и все. Потому что у меня была та же самая проблема, и решение сверху не работало для меня.

1111161171159459134
источник
1
Эти шаги сработали отлично. Я просто хочу добавить это для тех, кто еще не использует расширения файлов woff, чтобы быть уверенным, и добавить этот mimetype в web.config.
Coding101
1
Конвертер не нужен. Посмотрите на ответ Марко Кервитца.
Herr_Schwabullek
25

Другие ответы не ошибаются, но я нашел, что это самый быстрый способ.

  1. Загрузите zip-файл из Google шрифтов и распакуйте его.
  2. Загружайте файлы шрифтов 3 одновременно на http://www.fontsquirrel.com/tools/webfont-generator
  3. Загрузите результаты.

Результаты содержат все форматы шрифтов: woff, svg, ttf, eot .

И в качестве дополнительного бонуса они генерируют файл CSS для вас тоже!

sym3tri
источник
+1 за ответ, о котором мне не нужно было думать, читая его. Было бы здорово найти прямой конвертер шрифтов Google без необходимости загружать их ранее. Пример утилиты: при автономном управлении сайтом.
Meetai.com
Это очень удобно иметь разные форматы шрифтов для вас. Но любой, кто использует его, должен знать, что сгенерированный CSS не очень умен, он будет генерировать два (или более) стиля одного и того же шрифта в качестве отдельных семейств шрифтов вместо одного семейства шрифтов с разными весами шрифтов. Но это довольно легко исправить самостоятельно в css.
Кен Сунг
2
Конвертер не нужен. Посмотрите на ответ Марко Кервитца
Herr_Schwabullek
Мне удалось загрузить 10 шрифтов за один раз, так что кажется, что ограничение 3 шрифтов было удалено или увеличено
Адриан Хедли
4

3 шага:

  1. Загрузите свой собственный шрифт в Goole Fonts и загрузите .css файл, например: Download http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 и сохраните как example.css
  2. Откройте загруженный файл ( example.css ). Теперь вы должны скачать все файлы шрифтов и сохранить их в каталоге шрифтов .
  3. Отредактируйте example.css : замените весь файл font-face на ваш файл .css

Пример:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Посмотрите на src: -> URL. Загрузите http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 и сохраните в каталог шрифтов . После этого измените URL для всех загруженных вами файлов. Теперь это будет выглядеть

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** Скачать все шрифты, содержащие файл .css Надеюсь, это поможет вам

duydb
источник
4

Если вы хотите явно объявить зависимости пакетов или автоматизировать загрузку, вы можете добавить пакет узлов, чтобы загружать шрифты Google и обслуживать их локально.

npm - Google Font Download s

Проект гарнитур создает пакеты NPM для гарнитур с открытым исходным кодом:

Каждый пакет поставляется со всеми необходимыми шрифтами и CSS для самостоятельного размещения открытого шрифта.
Были добавлены все шрифты Google, а также небольшой, но растущий список других шрифтов с открытым исходным кодом.

Просто найдите npm для просмотра доступных шрифтов, таких как typeface-roboto или typeface-open-sans, и установите их так:typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

НПМ - Google шрифты Download- ERS

Для более общего случая использования существует несколько пакетов npm, которые будут доставлять шрифты в два этапа: сначала путем получения пакета, а затем, указав в нем имя шрифта и параметры, которые вы хотите включить.

Вот некоторые из вариантов:

Дальнейшее чтение :

KyleMit
источник
3

По сути, вы включаете шрифт в свой проект.

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');
DavidB
источник
битая
Загрузка не включает .eot файл
exe
2

При использовании Google Fonts ваш рабочий процесс делится на 3 этапа: «Выбрать», «Настроить», «Вставить». Если вы посмотрите внимательно, в правом конце страницы «Использование» есть небольшая стрелка, которая позволяет вам загрузить шрифт, находящийся в данный момент в вашей коллекции.

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

Пьер-Адриен Буассон
источник
0

Я последовал ответу duydb, чтобы создать приведенный ниже код на python, который автоматизирует этот процесс.

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

Надеюсь, что это поможет с некоторыми из смерти копирования-вставки.

Витамма Вирт
источник
-1

Вам нужно скачать шрифт и ссылаться на него локально.

Загрузите CSSссылку, которую вы разместили, затем загрузите все WOFFфайлы и (при необходимости) преобразуйте их в TTF.

Затем измените CSSссылку, которую вы разместили, чтобы включить шрифты локально.

Из

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

к

url(/path/to/font/font.woff)

Вуаля! Возможно, вам нужно сделать еще кое-что, но выше изложены основы. Эта статья объясняет немного лучше.

Mattios550
источник
То же самое, но другие страницы искажаются. : <link href = "./ css / font.woff" rel = 'stylesheet' type = 'text / css'>
user2147954
Ваш файл шрифтов называется font.woff? Вы проверяли, что файл загружен?
Терри
@ Терри, я не уверен, что вы имеете в виду - это было вымышленное имя для файла.
Mattios550
-3

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

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}
Ашиш ваман
источник