BITSPARK / Статьи / Дизайн и элементы сайта

Шрифты для сайта: что проверить до утверждения макета

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

Статья для владельца бизнеса или маркетолога, которому на шаге дизайна показывают макет со шрифтами и просят его согласовать. В ней разобрано, какие шрифты бывают, что проверить в шрифте до утверждения макета, как шрифты связаны со скоростью и сдвигами макета, какой размер текста называют Lighthouse и web.dev и что написано в лицензиях и в двух статьях ГК РФ.

Подборок шрифтов, шрифтовых пар и ссылок на скачивание здесь нет. Названия шрифтов стоят только там, где они есть на страницах источников. Код приведён один раз, коротким примером с web.dev. Примеры вымышленные: кофейня с сайтом example.ru.

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

Какие шрифты бывают на сайте?

Коротко: системный шрифт уже установлен на устройстве посетителя и не загружается. Веб-шрифт сайт отдаёт файлом вместе со страницей. Названия вроде Times New Roman или Helvetica web.dev называет семействами шрифтов, а файл шрифта содержит одно начертание, если это не вариативный шрифт.

На странице MDN «Web fonts» сказано, как браузер выбирает шрифт для текста:

«When displaying a webpage, a browser will travel down a list of font-family values until it finds a font available on the system it is running on»

Перевод наш: показывая страницу, браузер идёт вниз по списку значений font-family, пока не найдёт шрифт, доступный в системе, на которой он запущен.

Web.dev называет такой шрифт системным и объясняет, почему его не нужно загружать:

«A system font is the default font used by the user interface of a user's device. (...) Because the font is already installed, the font does not need to be downloaded.»

Перевод наш: системный шрифт - шрифт, который устройство пользователя использует в своём интерфейсе по умолчанию. (...) Поскольку шрифт уже установлен, его не нужно загружать.

Веб-шрифт устроен иначе. MDN в разделе «Web fonts» пишет:

«CSS allows you to specify font files, available on the web, to be downloaded along with your website as it's accessed.»

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

Для заказчика важно различие между семейством и файлом. Это различие web.dev объясняет в блоке «Key Term»:

«A font family is composed of styles, which are particular variations of the typeface (for example, light, medium, or bold italic). A font file contains a single style, unless it's a variable font.»

Перевод наш: семейство шрифтов состоит из начертаний - отдельных вариантов гарнитуры (например, светлого, среднего или полужирного курсива). Файл шрифта содержит одно начертание, если это не вариативный шрифт.

Пример. Дизайнер кофейни example.ru выбрал в макете нормальное, полужирное и курсивное начертания одного шрифта. По определению web.dev это три начертания, и если шрифт не вариативный, каждому нужен свой файл. Это вывод автора. Вариативные шрифты разобраны в разделе о формате файла.

Фирменную надпись на баннере тоже можно сделать шрифтом. MDN советует не писать текст в изображениях. Для уникального образа web.dev называет веб-шрифт. Подробнее об этом в статье Формат изображений для сайта: какой выбрать и что передать подрядчику.

Что проверить в шрифте до утверждения макета?

Коротко: пять проверок. Есть ли кириллица, какие начертания нужны, сколько файлов и в каком формате загрузит сайт, какой запасной шрифт увидит посетитель и какая у шрифта лицензия. Числа допустимых шрифтов или начертаний источники не называют.

Каждая проверка опирается на страницу, которая названа рядом.

  1. Кириллица. Web.dev пишет: «Font files typically include a large number of glyphs for all the various characters they support.» Перевод наш: файлы шрифтов обычно включают большое число глифов для всех знаков, которые они поддерживают. Глиф - изображение знака. Какие знаки поддерживает выбранный шрифт, источники не говорят. Попросите показать макет с вашими настоящими русскими заголовками, абзацами, цифрами и знаком ₽ и проверьте, что все знаки нарисованы одним шрифтом.
  2. Начертания. Составьте список начертаний, которые есть в макете: нормальное, полужирное, курсив. По определению web.dev каждое начертание, кроме вариативного шрифта, лежит в отдельном файле.
  3. Число файлов и формат. Web.dev советует формат WOFF2 и способы уменьшить размер файлов и число веб-шрифтов. Подробности в разделе о формате файла.
  4. Запасной шрифт. Это шрифт, которым браузер показывает текст, пока веб-шрифт не пришёл. Web.dev называет разницу в занимаемом месте между веб-шрифтом и запасным причиной сдвигов макета.
  5. Лицензия. Название шрифта, текст лицензии и сведения о том, на кого она оформлена. Разделы о лицензиях ниже.

Как веб-шрифты влияют на скорость и сдвиги макета?

Коротко: web.dev называет два влияния веб-шрифтов: задержку показа текста, если шрифт не загрузился, и сдвиги макета, когда веб-шрифт и запасной занимают на странице разное место. Каждый добавленный файл шрифта может замедлить загрузку, поэтому страница советует сокращать число веб-шрифтов.

Страница «Best practices for fonts» начинается с двух эффектов. Первый она описывает так:

«Delayed text rendering: If a web font has not loaded, browsers typically delay text rendering.»

Перевод наш: задержка показа текста: если веб-шрифт не загрузился, браузеры обычно задерживают показ текста.

Второй эффект касается положения элементов на странице:

«These layout shifts occur when a web font and its fallback font take up different amounts of space on the page.»

Перевод наш: эти сдвиги макета возникают, когда веб-шрифт и запасной шрифт занимают на странице разное место.

Строка в запасном шрифте занимает одно место, а в веб-шрифте другое, и после замены содержимое страницы смещается. Страница связывает эти эффекты с показателями FCP, LCP и CLS. Определения показателей в этой статье не разбираются.

О числе файлов на странице web.dev «Typography» сказано так:

«But every web font file you add could potentially degrade the user experience as it increases page load time.»

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

На странице «Best practices for fonts» к этому добавлено правило для выбора:

«The fastest font to deliver is a font that isn't requested in the first place.»

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

Там же названы два способа, которые могут сократить число веб-шрифтов: системные и вариативные шрифты. Для основного текста системный шрифт, по словам страницы, «can work particularly well». Перевод наш: может работать особенно хорошо.

Для макета отсюда следует вопрос к дизайнеру: какие тексты действительно нужно набирать веб-шрифтом.

Какой формат файла нужен и как уменьшить число и размер файлов?

Коротко: web.dev советует формат WOFF2 и приводит цифру: WOFF2 сжимает на 30% лучше, чем WOFF. MDN пишет, что все основные браузеры поддерживают WOFF и WOFF2. Размер файла уменьшают подмножества шрифта, а число веб-шрифтов могут сократить вариативный шрифт и системный шрифт. Про подмножества web.dev просит проверить, что лицензия их разрешает.

Файл веб-шрифта подключают записью @font-face в файле стилей. Web.dev называет её минимальное содержание: имя шрифта и место файла.

«At a minimum, it declares the name that's used to refer to the font and indicates the location of the corresponding font file.»

Перевод наш: как минимум она объявляет имя, по которому шрифт вызывается, и указывает место соответствующего файла шрифта.

Пример записи со страницы web.dev. Open Sans - название шрифта из примера на странице web.dev, рекомендацией оно не служит:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

В записи указан формат woff2. О нём та же страница пишет:

«WOFF2 compresses 30% better than WOFF, leading to less data to download and therefore faster performance.»

Перевод наш: WOFF2 сжимает на 30% лучше, чем WOFF, поэтому скачивать нужно меньше данных, а значит, выше скорость.

Страница web.dev «Typography» даёт тот же совет в одной фразе: «Use woff2 as your web font format.» Перевод наш: используйте woff2 как формат веб-шрифта. MDN пишет о поддержке:

«All major browsers support WOFF/WOFF2 (Web Open Font Format versions 1 and 2).»

Перевод наш: все основные браузеры поддерживают WOFF/WOFF2 (Web Open Font Format версий 1 и 2).

Какие браузеры проверять на сайте, зависит от вашей аудитории. Как составить такой список, описано в статье Кроссбраузерность сайта: что это и как проверить до приёмки.

Размер файла уменьшает подмножество шрифта. По словам web.dev, странице могут быть нужны не все знаки, которые есть в файле шрифта. Страница объясняет подмножество на примере с кириллицей:

«A subset font includes a smaller portion of the glyphs that were contained in the original font file. For example, rather than serve all characters to all users, a site might generate separate subset fonts for Latin and Cyrillic characters.»

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

Какие знаки покрывает файл, сообщает браузеру описание unicode-range. Это поле в записи @font-face. В том же разделе сказано:

«The unicode-range descriptor in the @font-face declaration informs the browser which characters a font can be used for. (...) A font file is downloaded if the page contains one or more characters matching the unicode range.»

Перевод наш: описание unicode-range в записи @font-face сообщает браузеру, для каких знаков можно использовать шрифт. (...) Файл шрифта загружается, если на странице есть один или несколько знаков из этого диапазона.

В конце раздела о подмножествах стоит предупреждение, которое касается заказчика:

«Always check the font licenses to confirm they allow subsetting and self-hosting.»

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

Число файлов может сократить вариативный шрифт. Web.dev описывает его идею так:

«The idea behind variable fonts is that a single variable font can be used as a replacement for multiple font files.»

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

У способа есть граница. По странице «Typography», один файл вариативного шрифта больше файла с одним начертанием, но «will probably be smaller than multiple regular font files». Перевод наш: вероятно, будет меньше нескольких обычных файлов. Страница «Best practices for fonts» уточняет, кому это выгодно:

«Sites that will see the largest improvement from using variable fonts are those that use (and need to use) a variety of font styles and weights.»

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

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

Свои серверы или сторонний сервис: что пишет web.dev?

Коротко: две страницы web.dev по-разному оценивают разницу в скорости между файлами шрифтов на своих серверах и у стороннего сервиса. Обе называют условия: CDN и HTTP/2. Заказчику нужно знать, где лягут файлы, и проверить, разрешает ли лицензия размещение на своих серверах.

Веб-шрифты можно отдавать с сервера сайта или подключать у сервиса шрифтов. MDN называет сервис, который хранит и отдаёт шрифты за вас, одним из трёх мест, откуда берут шрифты. Размещение на своём сервере web.dev называет термином self-hosting, то есть самостоятельная раздача.

Страница «Best practices for fonts» (обновлена 4 октября 2022 года) оценивает скорость осторожно:

«On paper, using a self-hosted font should deliver better performance as it eliminates a third-party connection setup. In practice, the performance differences between these two options is less clear cut.»

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

Страница «Optimize web fonts» (обновлена 1 ноября 2023 года) формулирует иначе:

«You can eliminate the need for a third-party connection by self-hosting your web fonts. In most cases, self-hosting web fonts is faster than downloading them from a cross-origin.»

Перевод наш: вы можете убрать необходимость стороннего соединения, разместив веб-шрифты на своём сервере. В большинстве случаев раздача с собственного сервера быстрее, чем загрузка с другого источника.

Две страницы названы рядом, потому что общего вывода о том, что быстрее, из них сделать нельзя. Обе называют условия для своих серверов. Первая просит убедиться, что сайт использует CDN (Content Delivery Network, сеть доставки содержимого) и HTTP/2, и пишет, что без этих технологий гораздо менее вероятно, что раздача шрифтов с собственного сервера окажется быстрее. Вторая просит проверить CDN, HTTP/2 или HTTP/3 и правильные заголовки кеширования.

Есть и обратная сторона. По словам страницы «Best practices for fonts», некоторые сервисы шрифтов могут сами отдавать версии файлов с разными подмножествами. Там же есть предупреждение:

«When moving to self-hosting, this is an optimization that can be missed and lead to larger font files locally.»

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

Вопросы к исполнителю: где будут лежать файлы шрифтов, есть ли на сервере CDN и HTTP/2, кто готовит подмножества и в каком формате. Для размещения на своих серверах нужна лицензия, которая это разрешает. Об этом сказано в предупреждении web.dev о подмножествах и в разделах о лицензиях.

Что такое font-display и что здесь решает заказчик?

Коротко: font-display - настройка в файле стилей. Она сообщает браузеру, как показывать текст, пока веб-шрифт не загрузился. Из пяти значений web.dev выделяет три стратегии по приоритету: скорость, быстрый показ текста или показ текста именно веб-шрифтом. Страница пишет, что выбор зависит от предпочтений.

Настройка описана на странице web.dev так:

«font-display informs the browser how it should proceed with text rendering when the associated web font has not loaded.»

Перевод наш: font-display сообщает браузеру, как действовать при показе текста, если связанный веб-шрифт ещё не загружен.

Без этой настройки поведение зависит от браузера. По словам страницы, Chromium-браузеры и Firefox по умолчанию блокируют показ текста до трёх секунд, если веб-шрифт не загрузился. Safari блокирует показ без ограничения по времени:

«By default, Chromium-based and Firefox browsers block text rendering for up to 3 seconds if the associated web font has not loaded. Safari blocks text rendering indefinitely.»

Перевод наш: по умолчанию браузеры на основе Chromium и Firefox блокируют показ текста на срок до 3 секунд, если связанный веб-шрифт не загрузился. Safari блокирует показ текста бессрочно.

Значений у font-display пять. Три стратегии, которые страница выделяет, сведены в таблицу. Каждая строка пересказывает слова страницы, перевод названий в скобках наш.

Приоритет по web.devЗначениеЧто пишет страницаОговорка страницы
Performance (скорость)optionalпоказ текста задерживается не дольше чем на 100 мс, сдвигов макета из-за замены шрифта нетвеб-шрифт не будет использован, если пришёл поздно
Quickly display text and still use a web-font (быстро показать текст и всё же использовать веб-шрифт)swapтекст показывается сразу, веб-шрифт подставляется, когда загрузитсяпри позднем приходе шрифта видно резкий сдвиг; шрифт нужно доставить достаточно рано
Text is displayed in a web font (текст показывается веб-шрифтом)blockтекст показывается веб-шрифтомначальный показ текста задерживается, сдвиг макета всё равно возможен

Какую стратегию выбрать, страница прямо не рекомендует:

«font-display strategies reflect different viewpoints about the tradeoff between performance and aesthetics. As such, it's difficult to recommend an approach as it depends on individual preferences, how important the web font is to the page and brand, and how jarring a late-arriving font can be when swapped in.»

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

Вывод автора: для заказчика это вопрос приоритета. Что важнее на вашем сайте: скорость показа текста или фирменный шрифт с первой секунды? Страница допускает и сочетание: swap для фирменных элементов, optional для основного текста. Для запасного шрифта она называет способ уменьшить сдвиг: «you can use the size-adjust attributes». Перевод наш: можно использовать атрибуты size-adjust. Эти настройки делает разработчик. Заказчику достаточно спросить, какое значение выбрано и почему.

Какой размер шрифта для сайта называют Lighthouse и web.dev?

Коротко: страница документации Lighthouse описывает проверку размера текста: порог 12 px и доли 40% и 60% текста. Та же страница предупреждает, что проверка удалена в Lighthouse 13, а запись о релизе объясняет причину. Нормы размера основного текста для сайта в этих источниках нет.

Lighthouse - инструмент проверки страниц. Запись о Lighthouse 13 называет места, где он доступен: Chrome DevTools, npm и расширение браузера.

Страница документации «Document doesn't use legible font sizes» описывает проверку размера текста. Она обновлена 2 мая 2019 года. Её слова о пороге:

«Lighthouse flags pages on which 40% or more of the text has a font size smaller than 12 px.»

Перевод наш: Lighthouse отмечает страницы, на которых 40% или более текста имеет размер шрифта меньше 12 px.

И совет страницы:

«Aim to have a font size of at least 12 px on at least 60% of the text on your page.»

Перевод наш: стремитесь к тому, чтобы размер шрифта был не меньше 12 px не менее чем у 60% текста на вашей странице.

Цифра 12 px - порог этой проверки. В начале страницы стоит предупреждение:

«Warning: This audit has been removed as of Lighthouse 13.»

Перевод наш: предупреждение: эта проверка удалена, начиная с Lighthouse 13.

Запись «What's new in Lighthouse 13» (опубликована 10 октября 2025 года) называет причину удаления:

«While small fonts is a legibility issue, there are no signals that this remains an SEO concern today.»

Перевод наш: хотя мелкий шрифт мешает читаемости, нет сигналов, что сегодня это остаётся проблемой для SEO.

Какой размер текста выбрать, подсказывает web.dev «Typography». Сложность на странице признана прямо:

«It's difficult to know what size text on the web should be.»

Перевод наш: трудно знать, каким должен быть размер текста в вебе.

Дальше она советует: «Use smaller text sizes for smaller screens and larger text sizes for larger screens.» Перевод наш: используйте меньший размер текста для меньших экранов и больший для больших. Для плавного изменения размера страница показывает функцию clamp(), которая задаёт нижнюю и верхнюю границы. Нижняя граница в её примере равна 1rem, «so as to not go below the user's preferred font size». Перевод наш: чтобы не опускаться ниже размера шрифта, который предпочитает пользователь.

Справка Яндекса критерий для мобильных экранов формулирует словами: «Размер текста в пикселях должен быть таким, чтобы весь текст удобно читался на экране мобильного устройства.» Число она не называет. Подробнее об этом в статье Адаптивный сайт: что это и как проверить адаптив до приёмки.

Чисел пикселей для договора или замечания подрядчику эти источники не дают. Рабочий вопрос к дизайнеру: показан ли макет на экране телефона и читается ли на нём основной текст.

Можно ли использовать шрифт на коммерческом сайте?

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

Русская страница MDN «Веб-шрифты» (перевод сообщества, изменена 14 декабря 2025 года по её пометке) говорит прямо:

«В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте).»

Там же стоит просьба проверить условия до использования:

«Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.»

Английская версия страницы изменена 25 августа 2026 года. Там сказано: «Make sure you have satisfied any licensing requirements if you are going to use this in a commercial and/or Web project.» Перевод наш: убедитесь, что вы выполнили все лицензионные требования, если собираетесь использовать это в коммерческом и (или) веб-проекте.

Страница учебная и условий конкретных шрифтов не называет. Откуда берут шрифты, она показывает так (английская версия, пересказ наш):

МестоЧто пишет MDN
Free font distributorсайт, где шрифты можно скачать бесплатно; условия лицензии всё равно могут быть, например указание создателя шрифта
Paid font distributorсайт, где шрифты продаются; шрифты можно купить и напрямую у словолитен (font foundries)
Online font serviceсайт, который хранит и отдаёт шрифты за вас

Про архив со шрифтом русская страница пишет: «веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию». При получении шрифта проверьте, что лицензия лежит рядом с файлами, и сохраните её.

Что написано в SIL Open Font License и в README Google Fonts?

Коротко: SIL Open Font License разрешает использовать, копировать, изменять, распространять и продавать копии шрифта при пяти условиях. Среди них: шрифт нельзя продавать отдельно, к копиям прикладывают уведомление об авторском праве и текст лицензии. Если хотя бы одно условие не выполнено, лицензия теряет силу. README репозитория google/fonts называет три лицензии шрифтов коллекции и просит читать лицензию каждого шрифта.

SIL Open Font License (OFL) - лицензия на шрифты. Страница с её текстом пишет, что официальным считается только английский оригинал, поэтому условия приведены на английском. Разрешение в версии 1.1 сформулировано так:

«Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions»

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

Разрешение действует при условиях. Первое условие:

«Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.»

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

Второе условие касается копий:

«Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license.»

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

Третье условие - зарезервированное имя. Лицензия определяет Reserved Font Name как имена, указанные в качестве таковых после уведомления об авторском праве. Затем она пишет:

«No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder.»

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

Определение изменённой версии в той же лицензии включает смену формата:

«by changing formats or by porting the Font Software to a new environment»

Перевод наш: сменой форматов или переносом шрифта в новую среду.

Вывод автора: вопрос, затрагивает ли подмножество или перевод в WOFF2 конкретный шрифт с зарезервированным именем, решается по тексту лицензии этого шрифта.

Условий в лицензии пять. Четвёртое не разрешает использовать имена правообладателя и авторов для продвижения изменённой версии без их явного письменного разрешения, кроме указания их вклада. Пятое требует распространять шрифт целиком под этой же лицензией и ни под какой другой. Отдельный раздел лицензии говорит о нарушениях:

«This license becomes null and void if any of the above conditions are not met.»

Перевод наш: эта лицензия утрачивает силу, если какое-либо из перечисленных условий не выполнено.

Какие шрифты выпущены под OFL, для Google Fonts сказано в README репозитория google/fonts. По описанию README, проект «mainly contains the binary font files served by Google Fonts». Перевод наш: в основном содержит бинарные файлы шрифтов, которые отдаёт Google Fonts. Раздел «License» начинается с просьбы:

«It is important to always read the license for every font that you use.»

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

Затем README перечисляет лицензии:

«Most of the fonts in the collection use the SIL Open Font License, v1.1. Some fonts use the Apache 2 license. The Ubuntu fonts use the Ubuntu Font License v1.0.»

Перевод наш: большинство шрифтов коллекции используют SIL Open Font License v1.1. Некоторые шрифты используют лицензию Apache 2. Шрифты Ubuntu используют Ubuntu Font License v1.0.

README указывает, где искать лицензию конкретного шрифта и на что обратить внимание при изменении шрифта:

«Each font family directory contains the appropriate license file for the fonts in that directory.»

Перевод наш: каждая папка семейства шрифтов содержит файл подходящей лицензии для шрифтов в этой папке.

«The SIL Open Font License has an option for copyright holders to include a Reserved Font Name requirement, and this option is used with some of the fonts. If you modify those fonts, please take care of this important detail.»

Перевод наш: в SIL Open Font License у правообладателей есть возможность включить требование о зарезервированном имени, и эта возможность использована у некоторых шрифтов. Если вы изменяете такие шрифты, учтите эту важную деталь.

О размещении на своих серверах README пишет в отдельном разделе:

«Since all the fonts available here are licensed with permission to redistribute, subject to the license terms, you can self-host using a variety of third-party projects.»

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

Слово «here» в этом предложении относится к шрифтам, которые лежат в репозитории. О коммерческом использовании шрифтов README не говорит. Условия каждого шрифта записаны в лицензии из его папки.

Что Microsoft пишет о шрифтах Windows на веб-сервере?

Коротко: страница Microsoft разрешает указывать шрифты, поставляемые с Windows, в списке шрифтов для страницы. Права копировать такие шрифты с компьютера на веб-сервер и переводить их в WOFF или WOFF2 страница не даёт.

Страница «Font redistribution FAQ» отвечает на вопросы о шрифтах, которые поставляются с Windows. В разделе «Web» она объясняет, что такое список шрифтов в стилях: перечень по приоритету, который браузер использует, если эти шрифты есть на устройстве. Для такого списка запрета нет:

«Web content publishers are free to specify Windows supplied fonts in their font stacks.»

Перевод наш: издатели веб-содержимого могут свободно указывать шрифты, поставляемые с Windows, в своих списках шрифтов.

Страница объясняет, почему для этого не нужна лицензия Windows:

«as a web page creator you don't even need to be a Windows licensee to include a Windows font name in a CSS font stack»

Перевод наш: создателю веб-страницы даже не нужно быть лицензиатом Windows, чтобы включить название шрифта Windows в список шрифтов CSS.

Следом идёт граница для веб-шрифтов:

«Web fonts are fonts that are hosted on a web server. You do not have rights to: copy fonts from a Windows installation to a web server, a process known as web font "self-hosting". convert the font to the formats typically associated with web fonts, such as the WOFF or WOFF2 format.»

Перевод наш: веб-шрифты - это шрифты, размещённые на веб-сервере. У вас нет прав: копировать шрифты из установки Windows на веб-сервер, процесс, известный как размещение веб-шрифта на своём сервере (self-hosting); переводить шрифт в форматы, которые обычно связывают с веб-шрифтами, например WOFF или WOFF2.

Для заказчика отсюда следует вопрос. Если дизайнер выбрал в макете шрифт, который стоит на его компьютере с Windows, надо выяснить, откуда возьмётся файл для сайта. Файл из установки Windows по этой странице на сервер копировать нельзя. Это вывод автора. Страница посвящена шрифтам, поставляемым с Windows.

Что ГК РФ говорит о пределах лицензии?

Коротко: п.1 ст.1235 ГК РФ говорит, что лицензиат использует результат интеллектуальной деятельности только в пределах прав и теми способами, которые предусмотрены лицензионным договором. Право, прямо не указанное в договоре, не считается предоставленным. Ст.1286.1 описывает открытую лицензию: её условия должны быть доступны неопределённому кругу лиц, а безвозмездной она считается, если не предусмотрено иное. Шрифт в этих статьях не назван.

Обе статьи общие: они говорят о лицензии на результат интеллектуальной деятельности и на произведение, шрифт в них не назван. Относятся ли конкретный шрифт и его лицензия к тому, о чём говорят ст.1235 и ст.1286.1, из этих статей ГК не следует. Это вопрос к юристу.

Здесь статьи приведены как общие правила о лицензии. Редакция по КонсультантПлюс: часть четвёртая ГК РФ, ред. от 23.07.2025 (с изм. и доп., вступ. в силу с 04.01.2026). Рядом со статьями на странице стоит пометка о подготовленной редакции с изменениями, не вступившими в силу.

Пункт 1 ст.1235 определяет пределы права лицензиата:

«Лицензиат может использовать результат интеллектуальной деятельности или средство индивидуализации только в пределах тех прав и теми способами, которые предусмотрены лицензионным договором. Право использования результата интеллектуальной деятельности или средства индивидуализации, прямо не указанное в лицензионном договоре, не считается предоставленным лицензиату.»

Из этого правила следует вопрос к исполнителю: какие способы использования записаны в лицензии на шрифт и записан ли среди них сайт? Это вывод автора. Что именно разрешает лицензия на веб-шрифт, надо читать в самой лицензии.

Пункт 1 ст.1286.1 говорит об условиях открытой лицензии:

«Открытая лицензия является договором присоединения. Все ее условия должны быть доступны неопределенному кругу лиц и размещены таким образом, чтобы лицензиат ознакомился с ними перед началом использования соответствующего произведения.»

О плате говорит п.3 той же статьи:

«Открытая лицензия является безвозмездной, если ею не предусмотрено иное.»

Вывод автора для заказчика: условия лицензии шрифта стоит прочитать до использования и сохранить их текст. Проверка лицензии - не юридическое заключение и не заменяет консультацию юриста.

Что спросить у дизайнера и разработчика и что получить вместе с сайтом?

Коротко: десять вопросов, каждый опирается на раздел выше. Вместе с сайтом полезно получить название каждого шрифта, текст его лицензии и сведения о том, на кого она оформлена.

  1. Какие шрифты и начертания стоят в макете и есть ли в них кириллица? Основание: разделы о типах шрифтов и о проверках, определение web.dev о начертаниях.
  2. Откуда взят каждый шрифт: бесплатный распространитель, платный или онлайн-сервис? Основание: три места на странице MDN.
  3. Какая у шрифта лицензия и где лежит её текст? Основание: MDN просит выполнить лицензионные требования; OFL называет условием, что каждая копия содержит текст лицензии; README Google Fonts просит читать лицензию каждого шрифта.
  4. Для платных шрифтов: кто платит и на кого оформлена лицензия? Основание: MDN пишет, что за шрифты нужно платить и (или) соблюдать другие условия; ст.1235 называет лицензиата и пределы его прав.
  5. Разрешает ли лицензия использовать шрифт на сайте, делать подмножества и раздавать файлы со своего сервера? Основание: предупреждение web.dev о подмножествах и self-hosting; для шрифтов Windows - страница Microsoft.
  6. Если шрифт стоит на компьютере дизайнера, откуда берётся файл для сайта? Основание: страница Microsoft о шрифтах Windows.
  7. Сколько файлов шрифтов загрузит страница, в каком они формате и можно ли уменьшить их размер и число? Основание: web.dev о WOFF2, подмножествах и вариативных шрифтах.
  8. Где лежат файлы: на вашем сервере или у сервиса, и есть ли CDN и HTTP/2? Основание: две страницы web.dev о раздаче шрифтов.
  9. Какое значение font-display выбрано, какой запасной шрифт назначен и как проверен сдвиг макета? Основание: web.dev о font-display и сдвигах макета.
  10. Как выглядит основной текст на экране телефона и читается ли он там? Основание: web.dev «Typography» и справка Яндекса.

Листок для согласования шрифтов можно вести в таком виде. Поля заполняет исполнитель:

Сайт: example.ru
Шрифт (название):
Начертания:
Откуда взят (бесплатный распространитель, платный, онлайн-сервис):
Лицензия (название и текст файлом):
На кого оформлена лицензия:
Разрешено на сайте / подмножества / размещение на своём сервере:
Формат и число файлов:
Где лежат файлы:
Значение font-display и запасной шрифт:

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

На главной странице BITSPARK шаг процесса «Дизайн» описан так: «Формируем характер проекта: типографику, композицию, движение и систему интерфейса.» В описании студии стоят слова: «Движение, типографика и код работают вместе с содержанием.»

Источники

Заголовки страниц даны по тегу title. Дата обращения ко всем страницам: 05.10.2026.

Обсудить проект в Telegram: t.me/billioniks

Читайте по теме

Все статьи раздела «Дизайн и элементы сайта» →