Как подключить google fonts css

Начните работу с Google Fonts API

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

В этом руководстве объясняется, как использовать Google Fonts API для добавления шрифтов на веб-страницы. Вам не нужно делать какое-либо программирование; все, что вам нужно сделать, это добавить ссылку на специальную таблицу стилей в ваш HTML-документ, а затем обратиться к шрифту в стиле CSS.

Быстрый пример

Вот пример. Скопируйте и вставьте следующий HTML-код в файл:

     body 
Making the Web Beautiful!
   

Затем откройте файл в современном веб-браузере. Вы должны увидеть страницу со следующим шрифтом Tangerine:

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

Теперь вы должны увидеть тень под текстом:

И это только начало того, что вы можете сделать с помощью Fonts API и CSS.

Обзор

Вы можете начать использовать Google Fonts API всего за два шага:

Добавьте ссылку на таблицу стилей, чтобы запросить нужный веб-шрифт:

.css-selector < font-family: 'Font Name', serif; >

Список шрифтов, которые вы можете использовать, см. в Google Fonts .

Указание семейств шрифтов и стилей в URL-адресе таблицы стилей

Чтобы определить, какой URL-адрес использовать в ссылке на таблицу стилей, начните с базового URL-адреса Google Fonts API:

https://fonts.googleapis.com/css

Затем добавьте параметр family= URL с одним или несколькими именами семейств шрифтов и стилями.

Например, чтобы запросить шрифт Inconsolata :

https://fonts.googleapis.com/css?family=Inconsolata

Чтобы запросить несколько семейств шрифтов, разделите имена вертикальной чертой ( | ).

Например, чтобы запросить шрифты Tangerine , Inconsolata и Droid Sans :

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Запрос нескольких шрифтов позволяет использовать все эти шрифты на вашей странице. (Но не переусердствуйте: большинству страниц не требуется очень много шрифтов, а запрос большого количества шрифтов может замедлить загрузку ваших страниц.)

Google Fonts API по умолчанию предоставляет обычную версию запрошенных шрифтов. Чтобы запросить другие стили или веса, добавьте двоеточие ( : ) к имени шрифта, за которым следует список стилей или весов, разделенных запятыми ( , ).

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Чтобы узнать, какие стили и веса доступны для данного шрифта, см. список шрифтов в Google Fonts .

Для каждого стиля, который вы запрашиваете, вы можете дать либо полное название, либо аббревиатуру; для весов вы также можете указать числовой вес:

Стиль	Спецификаторы
курсив	italic или i
смелый	bold или b или числовой вес, например 700
полужирный курсив	bolditalic или bi

Например, чтобы запросить курсив Cantarell и полужирный шрифт Droid Serif, вы можете использовать любой из следующих URL-адресов:

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

Использовать отображение шрифта

font-display позволяет вам управлять тем, что происходит, когда шрифт недоступен. Указание значения, отличного от auto по умолчанию, обычно является подходящим.

Передайте желаемое значение в параметре display строки запроса:

https://fonts.googleapis.com/css?family=Roboto&display=swap

Указание подмножеств сценариев

Некоторые шрифты в Google Font Directory поддерживают несколько шрифтов (например, латинский, кириллический и греческий). Чтобы указать, какие подмножества должны быть загружены, параметр подмножества должен быть добавлен к URL-адресу.

Например, чтобы запросить кириллическое подмножество шрифта Roboto Mono , URL-адрес будет таким:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Чтобы запросить греческое подмножество шрифта Roboto Mono , URL-адрес будет следующим:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Чтобы запросить как греческие, так и кириллические подмножества шрифта Roboto Mono , URL-адрес будет следующим:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

Латинское подмножество всегда включается, если доступно, и его не нужно указывать. Обратите внимание, что если клиентский браузер поддерживает unicode-range ( http://caniuse.com/#feat=font-unicode-range ), параметр подмножества игнорируется; браузер будет выбирать из подмножеств, поддерживаемых шрифтом, чтобы получить то, что ему нужно для отображения текста.

Полный список доступных шрифтов и подмножеств шрифтов см. в Google Fonts .

Оптимизация запросов шрифтов

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

В этих случаях вам следует рассмотреть возможность указания значения text= в URL-адресе запроса шрифта. Это позволяет Google вернуть файл шрифта, оптимизированный для вашего запроса. В некоторых случаях это может уменьшить размер файла шрифта до 90%.

Чтобы использовать эту функцию, просто добавьте text= в свои запросы API Google Fonts. Например, если вы используете Inconsolata только для заголовка своего блога, вы можете поместить сам заголовок в качестве значения text= . Вот как будет выглядеть запрос:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

Как и для всех строк запроса, вы должны закодировать значение в URL-адресе:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

Эта функция также работает для международных шрифтов, позволяя вам указывать символы UTF-8. Например, ¡Привет! представлен как:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

Примечание: нет необходимости указывать параметр subset= при использовании text= , так как он позволяет ссылаться на любой символ исходного шрифта.

Включение эффектов шрифта (бета-версия)

Создавая заголовки или отображая тексты на своем веб-сайте, вы часто хотите стилизовать текст в декоративном стиле. Чтобы упростить вашу работу, Google предоставил набор эффектов для шрифтов, которые можно использовать с минимальными усилиями для создания красивого отображаемого текста. Например:

Чтобы использовать эту бета-функцию, просто добавьте effect= в запрос Google Fonts API и добавьте соответствующее имя класса к элементам HTML, на которые вы хотите повлиять. В нашем примере выше мы использовали эффект shadow-multiple шрифта, поэтому запрос будет выглядеть так:

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

Чтобы использовать эффект, добавьте соответствующее имя класса к элементу (элементам) HTML. Соответствующее имя класса всегда является именем эффекта с префиксом font-effect- , поэтому имя класса для shadow-multiple будет font-effect-shadow-multiple :

Вы можете запросить несколько эффектов, разделив имена эффектов вертикальной чертой ( | ).

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

Вот полный список всех эффектов шрифта, которые мы предлагаем:

Эффект	Имя API	Имя класса	Поддерживать
Анаглиф	anaglyph	font-effect-anaglyph	Хром, Фаерфокс, Опера, Сафари
Кирпичный знак	brick-sign	font-effect-brick-sign	Хром, Сафари
Печать на холсте	canvas-print	font-effect-canvas-print	Хром, Сафари
Треск	crackle	font-effect-crackle	Хром, Сафари
Разлагающийся	decaying	font-effect-decaying	Хром, Сафари
Разрушение	destruction	font-effect-destruction	Хром, Сафари
огорченный	distressed	font-effect-distressed	Хром, Сафари
Проблемная древесина	distressed-wood	font-effect-distressed-wood	Хром, Сафари
Тиснение	emboss	font-effect-emboss	Хром, Фаерфокс, Опера, Сафари
Огонь	fire	font-effect-fire	Хром, Фаерфокс, Опера, Сафари
Огненная анимация	fire-animation	font-effect-fire-animation	Хром, Фаерфокс, Опера, Сафари
Хрупкий	fragile	font-effect-fragile	Хром, Сафари
Трава	grass	font-effect-grass	Хром, Сафари
Лед	ice	font-effect-ice	Хром, Сафари
Митоз	mitosis	font-effect-mitosis	Хром, Сафари
Неон	neon	font-effect-neon	Хром, Фаерфокс, Опера, Сафари
Контур	outline	font-effect-outline	Хром, Фаерфокс, Опера, Сафари
Паттинг Грин	putting-green	font-effect-putting-green	Хром, Сафари
Потертая сталь	scuffed-steel	font-effect-scuffed-steel	Хром, Сафари
Множественная тень	shadow-multiple	font-effect-shadow-multiple	Хром, Фаерфокс, Опера, Сафари
Расколотый	splintered	font-effect-splintered	Хром, Сафари
Статический	static	font-effect-static	Хром, Сафари
Стоунвош	stonewash	font-effect-stonewash	Хром, Сафари
Трехмерный	3d	font-effect-3d	Хром, Фаерфокс, Опера, Сафари
Трехмерный поплавок	3d-float	font-effect-3d-float	Хром, Фаерфокс, Опера, Сафари
Винтаж	vintage	font-effect-vintage	Хром, Сафари
Обои	wallpaper	font-effect-wallpaper	Хром, Сафари

Примечание. Некоторые эффекты шрифтов (например, 3d) не очень хорошо масштабируются и, как правило, лучше всего выглядят при использовании шрифтов большего размера. Кроме того, вы можете захотеть изменить стиль шрифтов, например, изменить цвет текста в соответствии с вашей страницей.

Есть еще много способов стилизовать ваши шрифты, и многие вещи возможны с помощью CSS. Мы просто предлагаем несколько идей, чтобы вы начали. Чтобы найти больше идей, попробуйте поискать в Google « текстовые эффекты css » и просмотрите множество идей, которые уже есть в Интернете!

дальнейшее чтение

• Полный список семейств шрифтов, предоставляемых Google Fonts API, см. в Google Fonts .
• Узнайте, как использовать загрузчик веб-шрифтов , чтобы лучше контролировать загрузку шрифтов.
• Узнайте больше о том, как работает Google Fonts API, на странице « Технические вопросы».

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2022-07-18 UTC.

Источник