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

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

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

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

Просто зайдите в 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'>

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

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

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

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

Нашел пошаговый способ добиться этого (для 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названию в ваших стилях

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

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

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

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

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

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 Надеюсь, это поможет вам

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

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

• Google Fonts Webpack Plugin
• Google Fonts Offline
• Google Fonts
• Получить Google шрифты

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

• Как разместить иконки материалов в автономном режиме?
• Использование автономных иконок материалов и шрифта Roboto в приложении Electron

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

@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');

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

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

Я последовал ответу 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)

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

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

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

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

Из

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

к

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

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

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

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}