unicode-range в @font-face: как разделить латиницу и кириллицу

unicode-range в @font-face позволяет указать браузеру, для каких символов предназначен конкретный файл веб-шрифта. Если вынести латиницу и кириллицу в разные начертания или подмножества, страница сможет загружать только нужные данные и корректно использовать один font-family для обоих алфавитов. Ниже разберём синтаксис, диапазоны Unicode, настройку CSS и проверку результата.

Дата актуальности: 22 июля 2026 года. Материал подходит для сайтов, лендингов, интернет-магазинов и интерфейсов, где один текст содержит русский, английский и другие языки.

unicode-range — это дескриптор правила @font-face, который связывает описание шрифта с диапазоном кодовых точек Unicode. Кодовая точка — числовой идентификатор символа: например, латинская буква A обозначается как U+0041, а кириллическая А — как U+0410. Буквы визуально похожи, но относятся к разным символам и имеют разные адреса в Unicode.

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

Правило @font-face описывает источник файла, имя семейства, стиль, насыщенность и поддерживаемые символы. Свойство font-family в CSS затем обращается к этому семейству, а unicode-range помогает браузеру понять, какой файл использовать для каждой кодовой точки. Поэтому два разных файла могут обслуживать одну и ту же семью шрифта: один — латинский текст, другой — кириллический.

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

Диапазон нужно выбирать по реальному составу текста и глифов, а не только по названию языка. Для обычного русского интерфейса часто достаточно базового кириллического блока U+0400–04FF. Он включает большинство букв русского и ряда других славянских языков, но не покрывает все расширенные варианты кириллицы.

Для латиницы можно начать с диапазона U+0000–024F, который охватывает базовую латиницу и многие расширенные латинские символы. Однако такой диапазон включает не только буквы. Если нужен более компактный набор, его составляют по конкретному проекту: отдельно добавляют буквы, цифры, знаки пунктуации, валютные символы и математические обозначения.

Диапазон U+0000–007F содержит пробел, цифры и пунктуацию, поэтому латинский файл может обслуживать не только английские буквы. Для кириллического текста это не означает автоматической поддержки кавычек, тире или неразрывного пробела: проверьте, присутствуют ли эти глифы в файле, и при необходимости добавьте общий диапазон либо отдельный файл символов.

Сначала определите, какие языки реально есть на странице. Для русскоязычного сайта это обычно русский интерфейс, латинские названия брендов, адреса электронной почты, URL, артикулы и технические термины. Затем проверьте исходный шрифт: если в нём отсутствуют кириллические глифы, один только unicode-range не добавит их и не исправит отображение.

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

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

Если латинский и кириллический файлы должны выглядеть как одно начертание, задайте одинаковые font-family, font-style и font-weight. Для обычного текста это может быть normal и 400, для полужирного — normal и 700. Нельзя описывать файл как 400, если внутри фактически находится начертание 500: браузер будет подбирать его непредсказуемо относительно остальных вариантов.

Откройте оба файла в инструменте просмотра шрифтов или проверьте их состав через используемый конвертер. Сравните заявленный unicode-range с реальными глифами. Если диапазон шире фактического покрытия, браузер может выбрать файл, в котором нужного символа нет, и затем перейти к запасному шрифту. Если диапазон слишком узкий, часть текста также уйдёт в fallback.

Предположим, у нас есть два файла одного начертания: BrandSans-Latin.woff2 и BrandSans-Cyrillic.woff2. Для латинского файла можно указать диапазон U+0000–024F, а для кириллического — U+0400–04FF. В CSS это записывается так: @font-face { font-family: 'Brand Sans'; src: url('/fonts/BrandSans-Latin.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-024F; } и @font-face { font-family: 'Brand Sans'; src: url('/fonts/BrandSans-Cyrillic.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0400-04FF; }.

После описаний семейство подключается без разделения по языкам: body { font-family: 'Brand Sans', sans-serif; }. Браузер анализирует каждый символ и выбирает подходящий файл. Если в строке есть английское слово и русское предложение, оба подмножества могут участвовать в отображении одной строки, но визуальная совместимость зависит от метрик и дизайна исходного шрифта.

Если в кириллическом файле нет знаков пунктуации, вынесите их в общий файл или включите в один из диапазонов осознанно. Например, можно создать третье правило с тем же семейством для диапазона U+2000–206F и отдельных символов вроде U+20AC для евро. Это помогает избежать неожиданной подмены тире, кавычек и валютных знаков системным шрифтом.

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

Свойство font-display определяет поведение текста во время загрузки шрифта. Значение swap позволяет сначала показать текст запасным шрифтом, а затем заменить его веб-шрифтом. Это не заменяет оптимизацию подмножеств, но помогает избежать невидимого текста при медленной загрузке. Проверяйте результат на мобильном устройстве, в режиме очистки кэша и при ограниченной сети.

Да. Несколько правил @font-face могут иметь одинаковое значение font-family и отличаться файлами и unicode-range. Такой подход позволяет обращаться к семейству единообразно во всём CSS, а браузер сам выбирает файл по кодовым точкам символов.

Да, если начертания разделены на разные файлы. Для normal, italic, 400, 500 и 700 могут существовать собственные подмножества, и каждому правилу следует задать соответствующий диапазон. Иначе браузер может не найти правильную комбинацию насыщенности, стиля и набора символов.

Браузер не связывает этот файл с символом и ищет другое подходящее правило или запасное семейство. Если ни один шрифт не содержит нужный глиф, символ отображается системным fallback-шрифтом или заменяется специальным знаком отсутствующего символа.

Да. В unicode-range допускаются отдельные кодовые точки и диапазоны, например U+20AC для знака евро или U+0400–04FF для блока кириллицы. Несколько значений перечисляют через запятую. Такой синтаксис удобен для точечной поддержки редких символов, но требует аккуратной проверки покрытия.

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

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

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

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