Как подключить шрифты в css font face

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

Для корректной работы необходимо указать как минимум два параметра: font-family и src. Первый задаёт имя шрифта, которое будет использоваться в стилях. Второй указывает путь к файлу. Пример:

@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'); }

Формат woff2 предпочтителен: он обеспечивает лучшую степень сжатия и поддерживается большинством современных браузеров. Однако, для совместимости с устаревшими системами стоит добавить резервные форматы – woff и ttf. Форматы eot и svg больше не актуальны и использовать их нет смысла.

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

@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'), url('/fonts/myfont.woff') format('woff'); font-weight: normal; font-style: normal; }

Для избежания конфликтов и лишней загрузки стоит указывать font-weight и font-style явно. Если подключается несколько начертаний одного шрифта, для каждого создаётся отдельная конструкция @font-face с нужными значениями этих параметров.

Минимальный пример подключения шрифта с использованием @font-face

Для подключения шрифта локально через @font-face необходимы следующие шаги:

Сохранить файл шрифта в проект, например: /fonts/Roboto-Regular.woff2.
Добавить правило @font-face в CSS-файл:

@font-face {
font-family: 'Roboto';
src: url('/fonts/Roboto-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

После этого шрифт можно использовать в стилях:

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

Путь к файлу должен быть указан относительно CSS-файла или с абсолютным путём от корня сайта.
Для формата woff2 не требуется fallback при поддержке современных браузеров.
Имена внутри font-family и font-weight задаются вручную – не зависят от содержимого файла.

Размещение файлов шрифта и пути в свойстве src

Файлы шрифтов рекомендуется хранить в отдельной директории, например /fonts/, расположенной в корне проекта или рядом с CSS-файлом. Это упрощает структуру и упорядочивает ресурсы.

В свойстве src пути к шрифтам указываются относительно CSS-файла, если не используется абсолютный URL. Например, если CSS находится в /css/style.css, а шрифт – в /fonts/Roboto.woff2, путь будет url("../fonts/Roboto.woff2").

Для корректной работы в разных браузерах рекомендуется указывать несколько форматов: woff2, woff, ttf. Формат woff2 ставится первым, так как он наиболее сжат и поддерживается современными браузерами.

Пример использования:

@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto.woff2') format('woff2'),
url('../fonts/Roboto.woff') format('woff');
font-weight: 400;
font-style: normal;
}

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

При использовании шрифтов с CDN в src указывается абсолютная ссылка, например: url('https://example.com/fonts/Roboto.woff2'). В этом случае файлы не должны быть размещены локально.

Если используется система сборки, пути могут отличаться в зависимости от конфигурации. Например, при использовании Webpack возможны загрузки через импорты и url-обработку, требующие настройки соответствующих загрузчиков.

Поддерживаемые форматы шрифтов и порядок их подключения

Браузеры поддерживают следующие форматы шрифтов: WOFF2, WOFF, TTF (или OTF), EOT и SVG. При использовании @font-face порядок подключения имеет значение для обеспечения максимальной совместимости.

WOFF2 – наиболее сжатый формат. Поддерживается в современных браузерах: Chrome 36+, Firefox 39+, Safari 10+, Edge. Следует указывать первым, чтобы его загрузка происходила приоритетно.

WOFF – компромисс между совместимостью и размером. Поддерживается почти всеми браузерами, включая более старые версии. Идёт сразу после WOFF2.

TTF/OTF – исходный формат, хорошо работает в большинстве современных браузеров, но имеет больший размер. Указывается после WOFF.

EOT – необходим только для старых версий Internet Explorer (до IE9). Подключается для совместимости, если требуется поддержка таких версий.

SVG – используется исключительно в старых версиях iOS (до iOS 4.3). Подключается в конце, если требуется поддержка этих устройств.

Пример правильного порядка подключения:


@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.eot') format('embedded-opentype'),
url('myfont.svg#MyFont') format('svg');
}

Если поддержка устаревших браузеров не требуется, можно ограничиться WOFF2 и WOFF. Формат указывается явно через параметр format(), чтобы ускорить определение браузером нужного файла.

Назначение и использование локального имени шрифта через local()

Директива local() в @font-face позволяет указать название шрифта, уже установленного в системе пользователя. Это снижает нагрузку на сеть: если шрифт найден локально, браузер не загружает внешний файл.

Синтаксис: src: local('НазваниеШрифта');. Название должно точно соответствовать системному имени шрифта, заданному внутри самого файла (не имени файла). Например, local('Arial') или local('Roboto Regular').

Для надёжности часто используют несколько источников: src: local('Roboto'), url('fonts/roboto.woff2') format('woff2');. В этом случае браузер сначала проверит наличие Roboto на устройстве. При отсутствии – загрузит указанный файл.

Чтобы определить точное имя, можно использовать инструменты разработчика: в браузере Chrome это вкладка «Сетевые шрифты» или свойства элемента в инспекторе. Также подходит просмотр метаданных TTF/OTF-файла через FontForge или аналогичные утилиты.

Важно учитывать чувствительность к регистру и пробелам. Например, local('Roboto-Regular') и local('Roboto Regular') – разные записи. Ошибка приведёт к пропуску шрифта и загрузке следующего источника в списке.

Использование local() ускоряет отображение текста на повторных посещениях сайта, особенно при наличии нужного шрифта в системе. Однако не стоит полагаться только на него – не все пользователи будут иметь нужный набор шрифтов.

Особенности подключения кириллических шрифтов

При использовании @font-face для подключения кириллических шрифтов важно учитывать наличие поддержки кириллического набора в выбранном файле. Многие шрифты по умолчанию содержат только латиницу. Чтобы избежать ошибок отображения, необходимо использовать версии, в которых явно указана поддержка кириллицы, например, «Cyrillic» или «Cyrillic Extended» в описании шрифта.

Для оптимизации загрузки следует ограничивать набор символов через параметр unicode-range. Например: unicode-range: U+0400-04FF – для базовой кириллицы. Это позволяет браузеру загружать только нужные глифы, снижая общий вес страницы.

Формат файлов имеет значение. WOFF2 предпочтительнее из-за лучшего сжатия. WOFF используется как запасной вариант. Подключать TTF или OTF не рекомендуется: они тяжелее и хуже поддерживаются на мобильных устройствах.

Путь к файлу не должен содержать кириллических символов и пробелов – это может вызвать ошибки в некоторых браузерах. Используйте латиницу и нижнее подчеркивание.

Если в проекте предполагается использовать несколько языков, стоит объединить кириллический и латинский наборы в один файл, чтобы избежать лишних HTTP-запросов.

Пример подключения шрифта с поддержкой кириллицы:

@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.woff2') format('woff2'),
url('fonts/myfont.woff') format('woff');
unicode-range: U+0400-04FF;
}

Указание начертания и насыщенности в @font-face

В CSS можно настроить начертание и насыщенность шрифта через директиву @font-face, что позволяет использовать различные вариации шрифтов, такие как обычное начертание, полужирное или курсив. Для этого в описании шрифта указываются параметры font-weight и font-style, которые контролируют толщину и наклон шрифта.

Чтобы задать начертание шрифта, используйте свойство font-style. Оно может принимать следующие значения:

normal – стандартное начертание;
italic – курсив;
oblique – наклонный шрифт.

Пример:

@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-style: italic;
}

Для насыщенности используется свойство font-weight. Оно позволяет указать толщину шрифта, варьируя от 100 (самая тонкая линия) до 900 (самая жирная линия). Для стандартных шрифтов обычно используется 400 для обычного начертания и 700 для полужирного. Если шрифт поддерживает несколько толщин, их нужно прописать явно в @font-face:

@font-face {
font-family: 'MyFont';
src: url('myfont-regular.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'MyFont';
src: url('myfont-bold.woff2') format('woff2');
font-weight: 700;
}

Если шрифт не поддерживает определённое начертание или насыщенность, браузер использует стандартные значения. Чтобы минимизировать такие случаи, важно подключать все необходимые вариации шрифта через несколько блоков @font-face.

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

Когда браузер не поддерживает формат шрифта, указанный в @font-face, происходит возврат к следующему шрифту, указанному в списке шрифтов в CSS или стандартному шрифту системы. Важно понимать, что некоторые форматы шрифтов имеют ограниченную поддержку в разных браузерах.

Если шрифт не загружается, браузер будет использовать fallback-значения, указанные в свойстве font-family. Например, если шрифт в формате WOFF2 не поддерживается, но поддерживается формат TTF, то будет использован TTF шрифт, если он доступен.

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

@font-face {
font-family: "CustomFont";
src: url("customfont.woff2") format("woff2"),
url("customfont.woff") format("woff"),
url("customfont.ttf") format("truetype");
}

Если все указанные форматы не поддерживаются, браузер отобразит текст с системным шрифтом, определённым в fallback-списке. Важно убедиться, что системные шрифты подходят по стилю и визуально не ухудшают восприятие страницы.

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

Для тестирования можно использовать следующие инструменты и методы:

Использование сервисов для проверки поддержки форматов шрифтов в браузерах.
Ручное тестирование на устройствах с различными операционными системами и версиями браузеров.
Обновление и расширение набора fallback-шрифтов, включая стандартные системные шрифты и популярные веб-шрифты.

Комбинирование нескольких @font-face для одного семейства

Для оптимального использования шрифтов в веб-разработке часто требуется подключать несколько различных вариантов одного шрифта. Это может включать разные начертания (например, жирный или курсивный) и толщины (например, normal и bold). Чтобы правильно комбинировать несколько @font-face для одного семейства, важно учитывать несколько аспектов.

Использование нескольких начертаний и толщин: Каждый вариант шрифта должен быть отдельно указан в правилах @font-face. Например, если вам нужно подключить как обычный, так и жирный стиль шрифта, следует определить два разных блока @font-face.
Оптимизация производительности: Подключение множества вариантов одного шрифта может увеличить время загрузки страницы. Чтобы минимизировать этот эффект, важно использовать форматы шрифтов, которые оптимизированы для веба, такие как WOFF2, и объединять шрифты в одну группу для экономии запросов к серверу.
Пример подключения нескольких вариантов: В следующем примере для шрифта используется стандартное начертание и жирное начертание:

@font-face {
font-family: "Open Sans";
src: url("OpenSans-Regular.woff2") format("woff2"),
url("OpenSans-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Open Sans";
src: url("OpenSans-Bold.woff2") format("woff2"),
url("OpenSans-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}

Здесь оба варианта шрифта Open Sans подключаются с указанием разных значений font-weight, что позволяет браузеру выбирать нужное начертание в зависимости от контекста.

Указание нескольких источников: Для повышения совместимости с разными браузерами и устройствами желательно указать несколько форматов шрифта. Например, кроме WOFF2, можно использовать WOFF или TTF для старых браузеров.
Обработка нестандартных начертаний: Если шрифт содержит нестандартные варианты, такие как «черный» или «тонкий», они также должны быть явно указаны через font-weight или font-style. В некоторых случаях шрифты могут поддерживать дополнительные начертания, например, «ExtraLight» или «Black», которые следует добавить как отдельные блоки @font-face.

Для каждого шрифта рекомендуется использовать разные блоки @font-face, чтобы корректно отобразить различные начертания, что способствует точному отображению шрифтов на всех устройствах и улучшает производительность сайта. Главное – не забывать о совместимости форматов и минимизации количества запросов к серверу.

Вопрос-ответ:

Что такое @font-face в CSS и зачем его использовать?

@font-face — это CSS-правило, которое позволяет подключить шрифт к веб-странице, даже если он не установлен на устройстве пользователя. Это удобно, когда нужно использовать нестандартные или кастомные шрифты, которые не присутствуют в системных шрифтах. В отличие от стандартных шрифтов, таких как Arial или Times New Roman, с помощью @font-face можно использовать любые файлы шрифтов, например, TTF или WOFF. Это помогает создать уникальный стиль сайта, не ограничиваясь только шрифтами, доступными в браузере.

Почему важно указывать несколько форматов шрифта при использовании @font-face?

Указание нескольких форматов шрифта важно для обеспечения совместимости с различными браузерами и платформами. Например, формат WOFF2 поддерживается современными браузерами, но старые версии могут не поддерживать его. В таких случаях можно указать более старый формат, например, WOFF или TTF. Таким образом, если браузер не поддерживает один формат, он попробует загрузить следующий в списке. Это помогает избежать проблем с отображением шрифтов на разных устройствах и браузерах.

Как сделать подключение шрифтов через @font-face более производительным?

Для повышения производительности при подключении шрифтов через @font-face можно использовать несколько техник. Во-первых, важно минимизировать размер файлов шрифтов, например, с помощью инструментов, которые удаляют ненужные символы. Во-вторых, можно использовать формат WOFF2, так как он предоставляет лучший сжатие. Также полезно указать свойство `font-display: swap;`, которое позволит браузеру отображать текст с заменой шрифта, если основной шрифт ещё не загружен, что улучшает пользовательский опыт. Наконец, стоит загружать шрифты асинхронно, например, с помощью атрибута `rel=»preload»`, чтобы ускорить процесс загрузки страницы.