Подключение Google Fonts
Google Fonts — это большая библиотека бесплатных шрифтов, которые можно использовать в любых проектах, в том числе коммерческих. Рассмотрим в статье, как добавить шрифты из этой библиотеки для использования на своем сайте.
Подключение шрифтов от Google Fonts с помощью поиска внутри библиотеки Тильды
Для того, чтобы подключить шрифт от Google Fonts, перейдите в настройки сайта → Шрифты и Цвета и нажмите на кнопку «Расширенные настройки».
Вы перейдете к списку способов добавления шрифтов на сайт. Перейдите на вкладку Google Fonts и нажмите на кнопку «Искать в шрифтах», чтобы перейти к библиотеке шрифтов от Google Fonts.
Откроется окно, в котором можно поискать шрифт по названию или выбрать нужный стиль шрифта — c засечками, без засечек, рукописный, моноширинный или Display — шрифт для крупных заголовков или текстовых элементов.
Если ваш проект не подразумевает использование кириллицы, то можно отключить ее поддержку, чтобы расширить базу доступных шрифтов.
После выбора нужного шрифта, можно посмотреть и выбрать нужные вам начертания. После выбора начертаний, нажмите на кнопку «Выбрать шрифт» и опционально галочку, если вы хотите использовать этот шрифт и для заголовков, и для текста.
После выбора в поле ссылки для Google Fonts автоматически подставится нужная ссылка для его подключения. Сохраните изменения. Шрифт подключен — теперь его параметрами можно управлять при редактировании страниц.
Как подключить полный шрифт?
Добрый день, не могу понять почему font-weight работает только в двух режимах:
Хотя из этого же браузера открываю google fonts (откуда я его и взял) демонстрацию шрифта и у них все значения работают:
Подключаю шрифт в css так:
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');в css свойствах указываю так:
- Вопрос задан более трёх лет назад
- 4505 просмотров
2 комментария
Простой 2 комментария
CSS Google Fonts
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
Google Fonts are free to use, and have more than 1000 fonts to choose from.
How To Use Google Fonts
Just add a special style sheet link in the section and then refer to the font in the CSS.
Example
Here, we want to use a font named «Sofia» from Google Fonts:
Sofia Font
Lorem ipsum dolor sit amet.
Example
Here, we want to use a font named «Trirong» from Google Fonts:
Trirong Font
Lorem ipsum dolor sit amet.
Example
Here, we want to use a font named «Audiowide» from Google Fonts:
Audiowide Font
Lorem ipsum dolor sit amet.
Note: When specifying a font in CSS, always list at minimum one fallback font (to avoid unexpected behaviors). So, also here you should add a generic font family (like serif or sans-serif) to the end of the list.
For a list of all available Google Fonts, visit our How To — Google Fonts Tutorial.
Use Multiple Google Fonts
To use multiple Google fonts, just separate the font names with a pipe character ( | ), like this:
Example
Request multiple fonts:
Добавить шрифт Google Fonts в WordPress
Существует немало плагинов, чтобы добавить шрифты Google на WordPress. Но в студии мы придерживаемся правила: «Если есть возможность не использовать плагины — не используем». Поэтому в статье рассмотрим способ добавления шрифтов без плагинов.
Шаг 1. Выбираем шрифт
Выбираем необходимые шрифты на fonts.google.com и добавляем их в избранное. В окошке справа появится код для вставки на сайт. По сути мы получаем две ссылки: одна на сайт со шрифтами, другая на выбранный шрифт.
Получаем ссылку на шрифт Google Fonts
Шаг 2. Добавляем шрифт на сайт
Подключаем шрифт к сайту: вставляем код с полученными ссылками в head.
Код вставляем в functions.php дочерней темы.
Шаг 3. Присваиваем тексту новый шрифт
Используем css-свойство font-family , которое устанавливает шрифт, используемый для оформления текста.
Для примера возьмём первую строчку из песни Чиж и Ко «О любви». Обернём её в тег span с классом song-text :
А не спеть ли мне песню?А классу song-text пропишем свойства:
Стили можно добавить в редакторе ‘Консоль > Внешний вид > Настроить > Дополнительные стили’
А не спеть ли мне песню?