Применение одного шрифта ко всему сайту через CSS

Быстрый ответ

Для использования единого шрифта на всём сайте, примените свойство font-family к селектору body.

Вот как это сделать:

body {
  /* Arial — выбор народный! */
  font-family: 'Arial', sans-serif;
}

Это правило назначит Arial в качестве шрифта для всего сайта, исключая те элементы, для которых шрифт будет задан позднее.

Осмысленность выбора шрифта

Важность выбора шрифта не следует недооценивать. Стоит отдавать предпочтение системным шрифтам, доступным по умолчанию, например, Arial, Verdana или Times New Roman, чтобы обеспечить отличную совместимость и читаемость.

Альтернативы селектору body

В редких случаях может оказаться полезной замена селектора body на селекторы * или :not(). Тем не менее, стоит помнить, что их использование может отрицательно отразиться на производительности, поэтому ими не следует злоупотреблять. Вот пример:

/* Брезгливы к иконкам! Исключаем элементы с классом .icon */
*:not(.icon) {
  font-family: 'Arial', sans-serif;
}

В данном случае все элементы, кроме тех, что имеют класс .icon, наследуют шрифт Arial.

Производительность и обслуживание кода

Селектор * может показаться универсальным решением, но его использование может негативно сказаться как на производительности, так и на удобстве поддержки кода. Поэтому более предпочтительно использовать наследование стилей от селектора body, что делает код более чистым и понятным.

Визуализация применения стилей

Представьте, что выбранный шрифт применяется к элементам без проблем:

Без применения CSS-правил для шрифта:
🅰️🅱️🆎🅰️🅾️        // До: Смешение шрифтов
🅰️🆎🅾️🅱️🅾️
🅾️🅱️🅰️🅾️🅱️

И что происходит после его применения:

body {
  /* Универсальность во главе угла! */
  font-family: 'Uniform Sans', sans-serif;
}

После применения CSS-правила для шрифта:
🚹🚹🚹🚹🚹        // После: Единообразие достигнуто!
🚹🚹🚹🚹🚹
🚹🚹🚹🚹🚹

Таким образом, одно свойство font-family может обеспечить единообразие на всём сайте.

Решение проблем с переопределением и наследованием

Большую часть времени элементы наследуют стили от body, но есть и такие, как кнопки или поля ввода, которые имеют собственные предопределённые стили, перекрывающие ваши. Именно их стили следует переопределить явно.

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

Великолепная возможность использовать уникальные шрифты через @font-face и придать вашему бренду индивидуальность. Однако не забудьте о проверке лицензий на использование этих шрифтов, а также о их совместимости с различными браузерами. Google Fonts — отличный выбор для уверенности в легальности и надёжности.

@font-face {
  /* MyCustomFont: дерзаем быть не похожими на других! */
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff2') format('woff2');
}

body {
  /* Предусматриваем вариант с отсутствием основного шрифта. */
  font-family: 'MyCustomFont', 'Fallback', sans-serif;
}

Обработка специальных случаев

Для вещей вроде иконок, которым не нужен универсальный шрифт, используйте :not() или custom rules для определённых классов, чтобы сохранить их функциональность и внешний вид.

/* FontAwesome и Material Icons: команда мечты */
.icon {
  font-family: 'FontAwesome', 'Material Icons', sans-serif;
}

Учет кроссбраузерной совместимости

Тщательное тестирование сайта в различных браузерах и на различных устройствах критично для обеспечения одинакового внешнего вида шрифтов. Для этих целей можно воспользоваться такими сервисами, как BrowserStack или Can I use.

Документирование вашего кода

Документирование вашего подхода к применению универсальных стилей шрифтов в CSS поможет сделать его более прозрачным и понятным, что будет полезно другим разработчикам в будущем.

Влияние на дизайн и доступность

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

Полезные материалы

1. CSS Fonts Module Level 3 — официальная спецификация W3C, охватывающая управление шрифтами в CSS.
2. Google Fonts — широкая коллекция бесплатных веб-шрифтов.
3. Использование @font-face в CSS на CSS-Tricks — подробное описание применения пользовательских шрифтов через @font-face.
4. @font-face – CSS: Cascading Style Sheets на MDN — ценные рекомендации от Mozilla по эффективному использованию @font-face.
5. Создание комплектов @font-face на Font Squirrel — превратите любые шрифтовые файлы в веб-шрифты.
6. Кроссбраузерная поддержка на Can I use... — проверьте поддержку @font-face различными браузерами.
7. Adobe Fonts — высококачественные шрифты от Adobe по подписке.