Как изменить шрифт на сайте через CSS?
По умолчанию у меня везде Times New Roman, хочу нормальный современный шрифт. Не до конца понимаю, как менять шрифт глобально и как подключить, например, шрифт с Google Fonts. Подскажите?
2 ответа
Шрифт задаётся свойством font-family. Чтобы поменять его на всём сайте, примените к body (он наследуется всеми элементами):
body {
font-family: 'Inter', Arial, sans-serif;
}
Пишут список через запятую — это fallback: если первого шрифта нет, берётся следующий, в конце общий тип (sans-serif/serif/monospace). Кавычки нужны для названий с пробелами.
Чтобы использовать кастомный шрифт (например, с Google Fonts), сначала подключите его. Простой способ — <link> в <head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
Или через @font-face, если шрифт лежит у вас локально:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-weight: 400;
}
body { font-family: 'MyFont', sans-serif; }
Рядом полезно задать font-size (например, 16px) и line-height: 1.5 для читаемости. Times появлялся потому, что у браузера дефолтное семейство serif — теперь вы его переопределили.
Подсказка про вес и начертание: одно дело подключить шрифт, другое — указать нужные толщины. В Google Fonts в ссылке перечисляете веса (wght@400;700), иначе font-weight: 700 подставит «фейковый» жирный, который выглядит хуже. И добавляйте системные шрифты в конце списка — пока кастомный грузится, текст покажется ими, а не пропадёт.