Веб-шрифты

До сих пор мы использовали шрифты, которые установлены почти на каждом компьютере: Arial, Verdana, Georgia, Times New Roman или Courier New. Их иногда называют безопасными для веба шрифтами. На них можно положиться, но их мало, и их используют очень многие сайты.

Веб-шрифт загружается из интернета вместе со страницей, поэтому его видит каждый посетитель, даже если на его устройстве такого шрифта нет. Тысячи бесплатных веб-шрифтов можно найти на Google Fonts. Там вы выбираете шрифт и нужные начертания, а сайт выдаёт фрагмент HTML, который нужно вставить в элемент head вашей страницы. Для шрифта Inter с начертаниями 400, 700 и 900 он выглядит так:

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

• Первые две строки (preconnect) говорят браузеру сразу подключиться к серверам Google, чтобы шрифт загрузился быстрее. Страница работала бы и без них, только чуть медленнее. Атрибут crossorigin нужен из-за особого способа, которым браузеры загружают шрифты; просто скопируйте его.
• Третья строка подключает таблицу стилей, как и link на наш style.css, но эта таблица хранится на сервере Google и сообщает браузеру, откуда скачать файлы шрифта. family=Inter:wght@400;700;900 означает шрифт Inter с начертаниями 400, 700 и 900, а display=swap — что пока шрифт не загрузился, текст показывается запасным шрифтом.

Затем мы используем шрифт в CSS:

body {
	font-family: Inter, Arial, sans-serif;
}

Остальные шрифты мы оставляем в списке как запасные, на случай если веб-шрифт не удастся загрузить. В названии Inter нет пробелов, поэтому кавычки не нужны, но "Inter" тоже сработает. Названия с пробелами, например Open Sans, пишите в кавычках: "Open Sans".

В веб-шрифте есть только те начертания, которые мы загрузили. Мы запросили 400, 700 и 900, так что наконец можем сделать главный заголовок сверхжирным.