Как правильно подключить Google Fonts к сайту?

Задан 6 месяцев назад511 просмотров2 ответа

Хочу нестандартный шрифт на сайте (например, Roboto). Как подключить шрифт с Google Fonts и применить его ко всему тексту?

Александр Марцун 🐣 Птенец

спросил 6 месяцев назад

2 ответа

✓ Принятый ответ — помог автору

Два шага.

Подключаешь шрифт в <head> (ссылку берёшь на fonts.google.com — выбираешь начертания, копируешь <link>):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Применяешь в CSS:

body {
  font-family: 'Roboto', sans-serif;
}

Обрати внимание на sans-serif в конце — это запасной (fallback) шрифт на случай, если Google Fonts не загрузится. И не подключай 10 начертаний «про запас» — каждое тянет вес, страница будет грузиться дольше.

Denis Fadin 🐣 Птенец

6 месяцев назад

Алена Трофлянина display=swap чтобы текст не был невидимым, пока грузится шрифт — важная мелочь · 5 месяцев назад

В <head> вставляешь <link> со страницы шрифта, потом в CSS пишешь font-family: 'НазваниеШрифта', sans-serif;. Fallback в конце обязательно.

Дарина Козлова 🐣 Птенец

5 месяцев назад

Ваш ответ

Войдите, чтобы ответить на вопрос.