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

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

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

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

Ответы

Ответ 1

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

Ответ 2

Отъезд google webfonts helper

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

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

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

Ответ 3

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

Выберите шрифт в http://www.google.com/fonts

Добавьте желаемую в свою коллекцию, используя синюю кнопку "Добавить в коллекцию"

Нажмите кнопку "Показать все стили" рядом с кнопкой "Удалить из коллекции" и убедитесь, что вы выбрали другие стили, которые вам также могут понадобиться, например "жирный"...

Нажмите кнопку "Использовать" в нижней правой части страницы.

Нажмите кнопку загрузки сверху с изображением стрелки вниз.

Нажмите "zip файл" в появившемся всплывающем сообщении

Нажмите кнопку "Закрыть" во всплывающем меню

Медленно пролистайте страницу, пока не увидите 3 вкладки "Standrd | @import | Javascript"

Перейдите на вкладку "@import".

Выберите и скопируйте URL-адрес между 'url(' и ')'

Скопируйте его в адресную строку на новой вкладке и идите туда

Сделайте "Файл > Сохранить страницу как..." и назовите ее "wishfontname.css" (замените соответственно)

Декомпрессируйте загруженные файлы .zip(.ttf).

Перейдите в "http://ttf2woff.com/" и конвертируйте любой .ttf, извлеченный из zip в .woff

Измените desiredfontname.css и замените любой URL внутри него [между 'url(' и ')'] с соответствующим преобразованным .woff файлом, который вы получили на ttf2woff.com; путь, который вы пишете, должен соответствовать вашему серверу doc_root

Сохраните файл и переместите его на свое последнее место и напишите соответствующий тег <link/> CSS, чтобы импортировать их на странице HTML

Отныне, обратитесь к этому шрифту по имени font-family в ваших стилях

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

Ответ 4

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

Загрузите zip файл из Google шрифтов и разархивируйте его.
Загрузите файлы шрифтов 3 за раз до http://www.fontsquirrel.com/tools/webfont-generator
Загрузите результаты.

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

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

Ответ 5

3 шага:

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

Пример:

@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;
}

Ответ 6

Посмотрите эту удобную статью, чтобы объяснить, как использовать шрифты 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');

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

НПМ - Google шрифт Загрузка сек

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

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

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

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

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

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

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

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

Ответ 10

Я описал, как использовать шрифты Google локально, следующим сообщением:

fooobar.com/questions/14925459/...

Может быть, это может помочь.

Ответ 11

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

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

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

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

Для

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

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

Ответ 12

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

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