ФЭНДОМ


Использование нестандартных шрифтов — лучший способ индивидуализировать ваш проект, а используя Google Fonts, сделать это можно проще и быстрее.

Шаг за шагом

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

После сброса и обновления кэша, которое занимает пару минут, подключённые шрифты будут готовы к использованию.

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

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

Во время просмотра шрифтов, добавляйте их с помощью «+». После того, как нужные вам шрифты выбраны, откройте диалоговое окно и выполните пункт 3 в списке выше. Все выбранные шрифты в списке будут перечислены в ссылке в конце через |, например @import url('https://fonts.googleapis.com/css?family=Bungee%7CRoboto');. По завершению пункта 4 с помощью одного импорта будут доступные сразу несколько шрифтов.

См. также

Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA , если не указано иное.