Почему шрифт Roboto в браузере отличается от Figma и как это исправить

Разница в отображении одного и того же шрифта между Figma и браузером - частая проблема фронтенд-разработчиков. Даже если в HTML и CSS указан Roboto, а браузер показывает правильное имя шрифта, визуальные отличия (высота, толщина, межбуквенные интервалы) могут быть значительными. Рассмотрим основные причины и способы решения.

Причины несовпадения шрифта Roboto в Figma и браузере

Разные версии шрифта

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

Отсутствие точного начертания (weight)

В Figma дизайнер может указать weight 450 (Medium), а в CSS доступны только 400 (Regular) и 500 (Medium). Браузер округляет значение, что меняет толщину символов.

Разный рендеринг шрифтов

Браузеры используют разные движки рендеринга (Blink, WebKit, Gecko). Figma рендерит шрифты иначе, чем браузер, особенно на Windows, где сглаживание отличается.

Как добиться точного совпадения шрифта с Figma

1. Подключайте шрифт через @import или link одинаково

Убедитесь, что в Figma и в коде используется один и тот же источник шрифта. Лучше всего подключать Roboto через Google Fonts с явным указанием всех нужных начертаний:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

2. Проверьте параметры шрифта в Figma

В Figma откройте панель свойств текста и посмотрите точные значения: font-family, font-weight, font-size, line-height, letter-spacing. Перенесите их в CSS без изменений.

3. Используйте CSS-свойство font-display

Добавьте font-display: swap в @font-face или в URL Google Fonts, чтобы браузер не подменял шрифт системным аналогом до загрузки.

4. Отключите сглаживание в браузере (экспериментально)

Для Windows можно добавить CSS-свойство -webkit-font-smoothing: antialiased и -moz-osx-font-smoothing: grayscale, чтобы уменьшить разницу в рендеринге.

5. Сбросьте стили браузера по умолчанию

Используйте normalize.css или сброс стилей, чтобы убрать влияние браузерных настроек на шрифт.

Практические советы фронтендеров

• Если разница критична, загрузите шрифт локально через @font-face, используя те же файлы, что и в Figma.
• Проверьте, не меняет ли Vite или сборщик шрифты при сборке - иногда происходит оптимизация.
• Используйте инструменты вроде Pixel Perfect для наложения макета поверх вёрстки.
• Свяжитесь с дизайнером и уточните, какой именно файл шрифта он использовал (версия, начертание).

Заключение

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