Всех приветствую!
Хочу вам рассказать и показать, как подключить и использовать шрифты текста в вашем проекте. Многие начинающие верстальщики задаются таким вопросом, именно поэтому хочу на конкретном примере показать, как это работает!
Для начала работы нам необходимо перейти на сайт Google Fonts:
Этот инструмент весьма полезен для поиска подходящего нам шрифта. К примеру, мы хотим найти шрифт Roboto. Для этого достаточно найти его в уже выданном столбце, либо ввести в поиске название. После того, как нужный шрифт был найден, необходимо экспортировать его в наш проект. Это можно сделать двумя способами:
1)Подключить специальный код. Это можно сделать как в html, так и в css документе;
2)Скачать необходимый шрифт и разместить в корневой папке вашего проекта.
Рассмотрим первый способ подключения. Для этого необходимо выбрать поле "Get ember code", после чего высветится следующая страница:
В случае выбора link, необходимый код нужно скопировать в html документ в тэг head. В случае, если вы выбрали @import, необходимо вставить нужный код в css документ.
После подключения стоит обратить внимание, что при использовании различной толщины текста шрифт будет изменяться согласно указанным примерам в google fonts. Попробуем создать несколько текстов и посмотреть различия.
Слева представлен текст с указанием толщины 500 и размером текста 20 пикселей, а справа - толщина 600 и размер текста 20 пикселей. Отсюда можно сделать вывод, что в зависимости от толщины текста шрифт будет изменяться согласно примеру на сайте. Это нужно учитывать, если вам нужна необходимая толщина текста.
Для закрепления пройденного рекомендую на примере вашего проекта опробовать привязать любой шрифт и попробовать все виды толщины текста (от 100 до 900).