Добавление нестандартного шрифта на сайт с помощью CSS

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

Для подключения пользовательского шрифта используйте CSS-правило @font-face, в котором определите название семейства шрифтов и пропишите путь к файлам шрифта. Пример использования шрифта MyCustomFont выглядит вот так:

@font-face {
  font-family: 'MyCustomFont';
  src: url('font.woff2') format('woff2'), /* Современные технологии заслуживают приоритета */
  url('font.woff') format('woff'); /* Всегда нужно иметь запасной вариант */
}

body {
  font-family: 'MyCustomFont', sans-serif; /* Основной шрифт – MyCustomFont, при недоступности используется запасной */
}

Рекомендуется обеспечить поддержку форматов .woff2 и .woff. Также важно адаптировать 'font.woff2' в соответствии с реальным путем к файлу шрифта на вашем сайте.

Подготовка: Выбор и оптимизация форматов шрифтов

Выбор шрифта – это первый шаг. Приоритетными форматами являются WOFF и WOFF2 благодаря их компактности и производительности. Для старых браузеров подойдут TTF или EOT. Чтобы получить все необходимые форматы выбранного вами шрифта, используйте инструменты типа Webfont Generator от Font Squirrel.

Кодирование: Надежный синтаксис @font-face

Представляем вам универсальный код для всех браузеров, иллюстрированный юмористическими комментариями:

@font-face {
  font-family: 'MyCustomFont'; 
  src: url('mycustomfont.eot'); /* IE9 становится стильнее */
  src: url('mycustomfont.eot?#iefix') format('embedded-opentype'), /* Никак не забываем про IE6-IE8 */
       url('mycustomfont.woff2') format('woff2'), /* WOFF2 для современных браузеров – непобедимых героев */
       url('mycustomfont.woff') format('woff'), /* WOFF – долгожитель */
       url('mycustomfont.ttf')  format('truetype'), /* TTF для исследователей из мира Safari и любителей Apple */
       url('mycustomfont.svg#svgFontName') format('svg'); /* Привет из прошлого – iOS */
}

Надежность: Управление загрузкой шрифтов и резервные варианты

Обеспечиваем загрузку и определяем резервные шрифты

На случай возможных проблем с загрузкой вашего шрифта запасайтесь резервными вариантами (sans-serif, serif).

Подробнее об этом расскажет наш спикер на видео

Размещение и ссылки на файлы шрифтов

Важно правильно разместить файлы шрифтов на сервере и указать корректные пути в CSS. Будьте внимательны при настройке CORS, чтобы избежать ошибок при загрузке шрифтов.

Совместимость: Тестирование в браузерах

Проверяем поддержку

С применением сайта caniuse.com проверьте, поддерживается ли @font-face теми браузерами, на которых ваш сайт потенциально будут открывать. Помните — даже при общей поддержке формата WOFF2, важно всегда иметь запасной вариант.

Тестирование в различных условиях

Пользователи могут использовать разные устройства и браузеры. Проверьте, как корректно отображаются шрифты на различных операционных системах и экранах. В этом вам помогут инструменты разрабов.

Визуализация

Добавим на страницу новый шрифт – с изображением елочки, FancyTree:

1. Найдите шрифт: 🔍 FancyTree.ttf
2. Опишите шрифт в CSS: 👩‍💼 @font-face { font-family: 'FancyTree'; src: url('FancyTree.ttf'); }
3. Подключите шрифт к элементу: 🌱 🎨 font-family: 'FancyTree', sans-serif;

После подключения шрифта FancyTree ваша страница станет еще более выразительной! 👑

Продвинутые методы

Веб-сервисы для шрифтов

Google Web Fonts предлагает обширную коллекцию бесплатных шрифтов. Если желаете что-то уникальное, обратите внимание на сервисы подобные Typekit.

Более глубокий контроль шрифтов: загрузчики веб-шрифтов

Javascript-загрузчики, такие как Webfontloader, обеспечивают дополнительное управление процессом загрузки шрифтов.

Доступность и скорость загрузки: уважение к пользователям

Важность доступности

Следование рекомендациям WebAIM при выборе шрифтов позволит учесть их размер, контраст и удобство чтения.

Оптимизация загрузки

Шрифты могут замедлить скорость загрузки страницы. Используйте субсетирование и переменные шрифты, чтобы сократить общий объем загружаемых данных.

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

1. CSS веб-шрифты — подробное руководство по использованию веб-шрифтов с использованием @font-face.
2. Как использовать @font-face в CSS | CSS-Tricks — детальное рассмотрение тематики пользовательских шрифтов в CSS.
3. Обзор шрифтов – Google Fonts — прекрасно оформленная и удобная библиотека веб-шрифтов.
4. Создайте свой пакет @font-face » Font Squirrel — инструмент для оптимизированной подготовки шрифтов для веба.
5. Веб-шрифты – Учим веб-разработку | MDN — официальная документация MDN по веб-шрифтам.
6. GitHub – typekit/webfontloader: Web Font Loader — инструмент для удобной работы с веб-шрифтами.
7. WebAIM: Шрифты и начертания — рекомендации по выбору шрифтов и доступности.