Как подключить шрифты Google Fonts

В этом туториале вы узнаете как подключить шрифт Google Fonts к своей страничке.

1. Выберите нужный шрифт

Зайдите на главную страницу Google Fonts и найдите нужный вам шрифт.

1.1. Если сходу он не находится, можно воспользоваться поиском.

2. Выберите нужную версию шрифта

У каждого шрифта есть несколько версий. Отличаются они, прежде всего, весом. Обозначается вес числом, и чем больше, тем толще шрифт. Вес 100 — это совсем тонкий шрифт. Вес 900 — очень толстый, его используют в заголовках.

Кроме цифры у веса бывает ещё своё название. Его указывают исключительно для удобства:

Light 300 — тонкий шрифт
Regular 400 — обычный шрифт
Bold 700 — жирный

Шрифты кроме веса отличаются также наклоном. Если хотите наклонный шрифт, то ищите в названии слово Italic. Например: Regular 400 Italic — это обычный наклонный шрифт. Bold 700 Italic — это жирный наклонный.

3. Получите код для подключения

Выберите нужную версию и нажмите Select this style. Если вам понадобится сразу несколько шрифтов – обычный, жирный, наклонный и так далее --, то выберите сразу несколько.

Справа всплывет менюшка, там жмите Embed. Вы получите код для подключения шрифта и inline-стиль для подключения.

Если менюшка не открылась, её можно открыть вот тут:

4. Подключите шрифт

Добавьте полученный тег <link> в тег <head> у вас на сайте, а стиль добавьте элементу, который хотите отобразить этим шрифтом:

<html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap" rel="stylesheet">
  </head>
  <body>
    <p>Обычный текст</p>
    <p style="font-family: 'Comic Neue', cursive;">Текст в шрифте Comic Neue</p>
  </body>
</html>

Скриншот результата. Как видите, на русском и на английском шрифт выглядит по-разному:

Попробуйте бесплатные уроки по Python

Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

Хочу код-ревью