Просто зайдите в 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 для реализации. Этот инструмент также позволяет просто загрузить все форматы одновременно без хлопот.
Также взгляните на их страницу Github .
источник
Content-type: text/css; charset: UTF-8
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
Нашел пошаговый способ добиться этого (для 1 шрифта):
(по состоянию на 9 сентября 2013 г. )
Вот и все. Потому что у меня была та же самая проблема, и решение сверху не работало для меня.
источник
Другие ответы не ошибаются, но я нашел, что это самый быстрый способ.
Результаты содержат все форматы шрифтов: woff, svg, ttf, eot .
И в качестве дополнительного бонуса они генерируют файл CSS для вас тоже!
источник
3 шага:
Пример:
Посмотрите на src: -> URL. Загрузите http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 и сохраните в каталог шрифтов . После этого измените URL для всех загруженных вами файлов. Теперь это будет выглядеть
** Скачать все шрифты, содержащие файл .css Надеюсь, это поможет вам
источник
Если вы хотите явно объявить зависимости пакетов или автоматизировать загрузку, вы можете добавить пакет узлов, чтобы загружать шрифты Google и обслуживать их локально.
npm - Google Font Download s
Проект гарнитур создает пакеты NPM для гарнитур с открытым исходным кодом:
Просто найдите npm для просмотра доступных шрифтов, таких как typeface-roboto или typeface-open-sans, и установите их так:
typeface-<typefacename>
НПМ - Google шрифты Download- ERS
Для более общего случая использования существует несколько пакетов npm, которые будут доставлять шрифты в два этапа: сначала путем получения пакета, а затем, указав в нем имя шрифта и параметры, которые вы хотите включить.
Вот некоторые из вариантов:
Дальнейшее чтение :
источник
По сути, вы включаете шрифт в свой проект.
источник
При использовании Google Fonts ваш рабочий процесс делится на 3 этапа: «Выбрать», «Настроить», «Вставить». Если вы посмотрите внимательно, в правом конце страницы «Использование» есть небольшая стрелка, которая позволяет вам загрузить шрифт, находящийся в данный момент в вашей коллекции.
После этого, и как только шрифт установлен в вашей системе, вы просто должны использовать его как любой другой обычный шрифт, используя
font-family
директиву CSS.источник
Я последовал ответу duydb, чтобы создать приведенный ниже код на python, который автоматизирует этот процесс.
Надеюсь, что это поможет с некоторыми из смерти копирования-вставки.
источник
Вам нужно скачать шрифт и ссылаться на него локально.
Загрузите
CSS
ссылку, которую вы разместили, затем загрузите всеWOFF
файлы и (при необходимости) преобразуйте их вTTF
.Затем измените
CSS
ссылку, которую вы разместили, чтобы включить шрифты локально.Из
к
Вуаля! Возможно, вам нужно сделать еще кое-что, но выше изложены основы. Эта статья объясняет немного лучше.
источник
font.woff
? Вы проверяли, что файл загружен?Просто скачайте шрифт и распакуйте его в папку. затем свяжите этот шрифт. приведенный ниже код работал для меня должным образом.
источник