Set google font in 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.

Источник

How To Add Google Fonts Using CSS

Google Fonts is a collection of 900+ stunning fonts that you can use on your personal or business website for free. In this guide we are going to look at how to add Google fonts using CSS.

Note: If you are using WordPress there is an easier way to use Google Fonts.

Choose Your Fonts

The first step is to choose the font(s) you want to use on your website.

With so many choices it can be tough to choose. Luckily Google has the option to sort by popularity.

Once you’ve chosen your fonts, click the red plus sign on each one to build your collection. Each font does add some weight and loading time to your pages, so I recommend limiting yourself to two fonts.

Google will begin counting your fonts at the bottom, click the black bar to see more information.

There are two ways to embed your fonts: ‘Standard’ and ‘@import’. We will be using the import method as it only requires editing one file, your .css file.

Get Your Import Code

Click @import and Google will present you with some code you can copy and paste. For this example I will be using two fonts, Dosis and Quicksand:

@import url('https://fonts.googleapis.com/css?family=Dosis|Quicksand');

This code can be pasted directly at the top of your .css file. The @import code will pull in all the required font files for the fonts you have chosen.

Specify Your Fonts

Now you have imported the fonts, you can begin using the fonts within your CSS file. There are two ways you can do this:

Modify an Existing CSS Rule

Your website likely already has rules for how text should look, for example:

I chose the ‘Dosis’ font above, so I will replace Arial with that.

Editing existing rules is a good option and will work almost every time. However, you may not want to touch existing code, or you might want to create a rule that targets a specific set of elements. To do that, we create new rules.

Create New CSS Rules

Because of CSS inheritance, this technique is more likely to work if you place your new rules at the bottom of your .css file. In this example I will assign the ‘Quicksand’ font to text in my sidebar:

I could also be more specific and only target headings in the sidebar:

Sometimes, because of CSS specificity, your new rules won’t work. If you are interested in learning CSS it’s valuable to learn why that is happening. But for now, we can shortcut that process by using the !important property.

Declarations using !important will overwrite most other settings, which is why this will almost always work.

Final Thoughts

Google Fonts is one of the best free resources available for customizing your website. In this guide, we have looked at the easiest way to add them using CSS. If you’re looking for extra inspiration, check out these excellent font combinations.

• Documentation
• Articles
• Affiliates
• Contact

Источник