Использование нестандартных шрифтов — лучший способ индивидуализировать ваш проект, а используя Google Fonts, сделать это можно проще и быстрее.
Шаг за шагом[]
- Откройте страницу https://fonts.google.com.
- Выбрав нужный вам шрифт, нажмите на иконку «+», расположенную в правой части заголовка с названием шрифта. При нажатии иконки снизу появится диалоговое окно с заголовком «1 Family Selected». Нажмите на него, и вы сможете увидеть список всех шрифтов, которые вы выбрали.
- В разделе «Your Selection» диалогового окна перейдите в раздел «EMBED» -> «Embed fonts» -> «@IMPORT». Если всё было сделано верно, то вы увидите подобие кода
@import url('https://fonts.googleapis.com/css?family=название_шрифта');
, гденазвание_шрифта
— название выбранного вами шрифта. - Игнорируя
<style>
и</style>
, скопируйте остальной код и вставьте его в самом начале локального CSS. - Не забудьте обратить внимание на раздел «Specify in CSS», расположенный в том же диалоговом окне. В нём будет указано, как объявить и использовать шрифт в CSS.
После сброса и обновления кэша, которое занимает пару минут, подключённые шрифты будут готовы к использованию.
Использование нескольких шрифтов[]
Если вы решили использовать несколько шрифтов, вы можете повторить вышеуказанные шаги для каждого шрифта или же использовать совет ниже.
Во время просмотра шрифтов, добавляйте их с помощью «+». После того, как нужные вам шрифты выбраны, откройте диалоговое окно и выполните пункт 3 в списке выше. Все выбранные шрифты в списке будут перечислены в ссылке в конце через |
, например @import url('https://fonts.googleapis.com/css?family=Bungee%7CRoboto');
. По завершению пункта 4 с помощью одного импорта будут доступные сразу несколько шрифтов.