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

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

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

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

unor
Редактировал вопрос 21-го мая 2018 в 1:03
Программирование
fonts offline css google-fonts
10-го апреля 2013 в 3:22
226 просмотров

Проверьте помощник от Google webfonts

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

всегда хотел знать, где Google размещает свои webfonts? Эта услуга может пригодиться, если вы хотите скачать все .СРВ, .вуф, .woff2, .СВГ .файлы TTF варианта шрифта непосредственно из Google (обычно пользователь-агент будет определять лучший формат).

Также взгляните на их страницу GitHub](https://github.com/majodev/google-webfonts-helper).

KyleMit
Редактировал ответ 25-го ноября 2018 в 6:22
Комментарии (9)
Решение

Просто зайдите на Google шрифтов - http://www.google.com/fonts/ добавить шрифт, как в вашей коллекции, и нажать кнопку Скачать. И затем просто использовать @fontface, чтобы подключить этот шрифт на веб-странице. Кстати, если вы откроете ссылку, которую вы используете, вы'll увидеть пример использования @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 (), чтобы ваш путь к файлам шрифт.

И затем замените ваш пример строки:

KyleMit
Редактировал ответ 25-го ноября 2018 в 2:43
Комментарии (7)

Нашла пошаговую инструкцию и способ достижения этой цели (для шрифта 1):<БР/> *(с сентября-9 2013)

  1. Выберите свой шрифт в http://www.google.com/fonts
  2. Добавить нужные к своей коллекции с помощью "и кнопку "Добавить" коллекция" и синий
  3. Нажмите и"увидеть все стили и" кнопка рядом с "Удалить из коллекции" и кнопку и убедитесь, что у вас есть некоторые другие стили вам также может понадобиться, таких как 'смелый'...
  4. Нажмите кнопку 'использовать' вкладку кнопку на правой нижней части страницы
  5. Нажмите кнопку "Скачать" сверху вниз изображение стрелки
  6. Нажмите на "zip-файл" на всплывающем сообщении
  7. Нажмите "рядом и" кнопка в всплывающем
  8. Медленно прокрутите страницу, пока не увидите 3 вкладки "в степень|@импорт|JavaScript-код"и
  9. Нажмите " вкладка мне, что@import&;
  10. Выберите и скопируйте URL-адрес в диапазоне от &#39;URL-адреса(&#39; и&#39;)&#39;
  11. Скопируйте его в адресную строку в новой вкладке и перейти там
  12. Вообще-то "Файл > Сохранить как..." и имя ее "desiredfontname.УСБ и" (заменить соответственно)
  13. Распаковать шрифты .zip-файл, который вы скачали (.TTF должен быть извлечен)
  14. Перейти к "и http://ttf2woff.com/" и конвертации любого .ТТФ, извлеченные из zip на .вуф
  15. Редактировать desiredfontname.CSSи заменить любой URL-адрес в ней [с&#39;URL-адреса(&#39; и&#39;)&#39;] с соответствующим конвертироваться .файл WOFF вы попали на ttf2woff.com; путь, который вы пишете, должен быть по своей относительно doc_root сервера
  16. Сохраните файл и перенесите его на ее окончательное место и написать соответствующее <ссылка/> CSS в теге, чтобы импортировать их в вашу HTML-страницу
  17. Теперь, смотрите этот шрифт на шрифт-семьи его имя в своем стили

Что's оно. Потому что я имел такую же проблему и решение сверху не работает для меня.<БР/>

nhahtdh
Редактировал ответ 6-го сентября 2013 в 8:11
Комментарии (2)

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

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

Результаты содержат все форматы шрифтов: WOFF и SVG, в формате TTF, СРВ.

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

Комментарии (4)

Взгляните на этот удобный статью]1 чтобы объяснить, как использовать шрифты Google в автономном режиме

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

@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');
Комментарии (1)

3 шага:

  1. Загрузка пользовательских шрифтов на шрифты гул и вниз нагрузки .CSS-файл пример: скачать http://fonts.googleapis.com/css?family=Open+Санс:400italic,600italic,400,600,300 и сохранить как пример.УСБ
  2. Откройте файл, который вы загружаете (пример.УСБ). Теперь вы должны скачать все шрифта файл и сохранить их на шрифты каталог.
  3. Редактировать пример.в 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;
}

в

Посмотрите на ГРЦ: -> 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-файл Надеюсь, это поможет U
Комментарии (0)

При использовании шрифтов Google, ваш рабочий процесс делится на 3 этапа : "и выберите" В, С "Настройки" В, С "встроить" по. Если присмотреться, справа от "вставлять" страницы, есть маленькая стрелка, которая позволяет скачать шрифт на данный момент в вашей коллекции.

<ИМГ СРЦ=с"https://i.stack.imgur.com/TGU4k.png" ширина=на"608" и />

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

KyleMit
Редактировал ответ 25-го ноября 2018 в 2:52
Комментарии (0)

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

НПМ - скачать шрифт Google<и>ы&л;/я и GT;

Проект шрифты создает НПМ пакеты для открытия шрифтов источник :

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

Просто поиск НПМ Для в <код>шрифт-<typefacename></код>, чтобы просмотреть доступные шрифты шрифт-робото или шрифт-открытые-Санс и установите такой:

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

НПМ - Скачать-&Google шрифты ЛТ;и>ЧН</я и GT;

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

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

Дополнительное Чтение:

KyleMit
Редактировал ответ 25-го ноября 2018 в 7:00
Комментарии (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)

Надеюсь, что это помогает с некоторыми копипаст смерти.

Wytamma Wirth
Редактировал ответ 15-го апреля 2018 в 4:35
Комментарии (0)

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

Скачать Усс по ссылке, которую вы опубликовали, затем загрузить все файлы кидал и (если нужно) преобразовать их в ЦФТ.

Затем измените Усс по ссылке вы выложили включить шрифты локально.

От

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

Для

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

Вуаля! Там могут быть некоторые больше, что вам нужно сделать, но это азы. В этой статье объясняет немного лучше.

Комментарии (3)

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

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}
Комментарии (0)