Figma: как подключить локальные шрифты и почему их не видно в браузере
Figma включает шрифты Google и шрифты Apple, но корпоративный брендбук почти всегда использует что-то своё. Файл открывается, а вместо логотипного начертания — подстановка. Причина обычно не в макете, а в том, что браузер по умолчанию не имеет доступа к шрифтам, установленным в системе.
Разберём, как это устроено официально, какие форматы поддерживаются и почему на одном ноутбуке шрифт виден, а на другом — нет.
Поддерживаемые форматы
Figma работает с .TTF и .OTF. Если шрифт скачан архивом, внутри могут быть отдельные файлы для Regular, Bold, Heavy и других начертаний — устанавливать нужно те, которые реально используются в макете.
Figma не «подгружает» шрифт из файла проекта: она обращается к шрифтам, которые видит операционная система или локальный агент. Поэтому порядок всегда такой: сначала установка в систему, потом Figma.
Десктопное приложение и браузер: принципиальная разница
| Сценарий | Что нужно |
|---|---|
| Figma Desktop App | Ничего дополнительно: приложение читает установленные системные шрифты |
| Figma в браузере (macOS, Windows) | Установить Figma Font Installer (FigmaAgent) |
| Figma в браузере на ChromeOS или Linux | Локальные шрифты не поддерживаются |
В документации прямо указано: Figma не поддерживает локальные шрифты на устройствах с ChromeOS и Linux — пользователям Chromebook и Linux доступны только шрифты Google. Это ограничение важно учитывать, если в команде есть такие машины: макет будет открываться с подстановкой, сколько ни устанавливай шрифт.
Как установить шрифт
- Скачайте файл шрифта (.ttf или .otf).
- Установите его в систему:
- Windows: правый клик по файлу → Install (или Install for all users);
- macOS: двойной клик и установка через Font Book.
- Для браузера — установите Font Installer:
- скачайте с figma.com/downloads;
- либо установите десктопное приложение: Font Installer входит в его состав.
- Перезагрузите открытые файлы Figma в браузере.
- Выберите шрифт в списке — локальные шрифты отображаются отдельно от библиотеки Google Fonts.
FigmaAgent не имеет интерфейса: он работает в фоне, находит установленные шрифты и передаёт их Figma. В списке процессов он называется FigmaAgent.
Если шрифт всё равно не виден
Порядок диагностики по официальной статье:
- Убедитесь, что шрифт действительно установлен в системе (проверьте в другом приложении, например в текстовом редакторе).
- Проверьте, запущен ли FigmaAgent в списке процессов.
- Если процесс завис — завершите его принудительно и запустите снова: откройте десктопное приложение или установщик шрифтов.
- Перезагрузите вкладку Figma.
- Проверьте формат: .ttf или .otf, а не .woff/.woff2 и не коллекция
.ttc. - На Linux и ChromeOS локальные шрифты недоступны — это не ошибка установки.
На Windows помогает установка «для всех пользователей»: при установке только для текущего пользователя некоторые приложения не видят шрифт до перезапуска.
Что происходит с файлом у коллег
Figma хранит в файле информацию о шрифте, но не сам файл шрифта. Коллега без установленного шрифта увидит предупреждение Missing font и подстановку. Варианты:
- Коллега устанавливает шрифт и Font Installer.
- Вы заменяете шрифт на доступный (Google Fonts) — с потерей точности макета.
- Вы отдаёте статичные изображения или PDF для просмотра, а не редактируемый файл.
- Для общих дизайн-систем используйте шрифты Google Fonts по умолчанию.
Для клиентских макетов стоит заранее договориться, кто отвечает за лицензии на шрифт: Figma не передаёт лицензию и не встраивает шрифт в файл.
Шрифты и дизайн-система: как организовать
Если в команде несколько человек и один брендовый шрифт, договоритесь о правилах:
- Один источник файла. Шрифт хранится в общем хранилище с указанием версии и лицензии.
- Инструкция по установке. Короткий документ: скачать, установить, поставить Font Installer, перезагрузить вкладку.
- Проверка при онбординге. Новый дизайнер открывает тестовый файл со всеми начертаниями и убеждается, что подстановок нет.
- Fallback-набор. Для внешних подрядчиков заранее определите замену из Google Fonts, чтобы макет не рассыпался.
- Версии шрифта. Если обновили файл шрифта, предупредите команду: старые и новые версии могут давать разную метрику.
Для дизайн-системы полезно вести отдельный файл-«спеку» с типографикой: размеры, интерлиньяж, начертания, названия семейств. Тогда при потере шрифта понятно, что именно восстанавливать.
Частые ошибки при установке
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Установлен только Regular | Bold и Italic подставляются | Установить все используемые начертания |
| Шрифт в формате .woff | Figma его не видит | Найти .ttf или .otf |
| Установка «только для меня» на Windows | Другое приложение не видит шрифт | Установить для всех пользователей |
| Не запущен FigmaAgent | Браузер не видит локальные шрифты | Запустить установщик или приложение |
| Открыта старая вкладка | Список шрифтов не обновился | Перезагрузить вкладку Figma |
| Работа на Linux | Локальные шрифты недоступны | Использовать Google Fonts или десктоп на macOS/Windows |
Если шрифт виден в Figma, но не отображается в экспортированном PNG, проверьте настройки экспорта и рендеринг текста: иногда проблема не в шрифте, а в конкретном слое с эффектом.
Браузер, приложение и лицензии
Десктопное приложение не решает лицензионных вопросов — оно лишь читает системные шрифты. Если у сотрудника нет права использовать шрифт, установка в систему этого не меняет. Проверяйте условия лицензии так же, как для Illustrator и InDesign.
Отдельный нюанс — переменные шрифты (variable fonts). Figma поддерживает работу с ними, но конкретное поведение начертаний зависит от файла и версии; если макет «прыгает» при переключении веса, проверьте на тестовом файле перед сдачей.
Чек-лист
- Уточнить формат шрифта: .ttf или .otf.
- Установить шрифт в систему.
- Для браузера — установить и запустить FigmaAgent.
- Перезагрузить вкладку.
- Проверить, что шрифт виден в другом приложении.
- Предупредить команду о необходимости установки.
- Не использовать Linux/ChromeOS, если нужен локальный шрифт.
FAQ
Почему Figma в браузере не видит шрифт, который есть в Photoshop?
Браузер не имеет прямого доступа к системным шрифтам. Нужен Figma Font Installer (FigmaAgent), который работает в фоне и передаёт список шрифтов.
Нужен ли Font Helper для десктопного приложения?
Нет. Приложение уже включает установщик шрифтов и читает системные шрифты автоматически.
Поддерживаются ли шрифты на Linux?
Нет. По документации Figma локальные шрифты на Linux и ChromeOS недоступны — только Google Fonts.
Почему коллега видит другой шрифт в моём файле?
У него не установлен этот шрифт или не запущен FigmaAgent. Figma показывает предупреждение о missing font и подставляет доступный вариант.
Можно ли встроить шрифт в файл Figma?
Нет. Файл ссылается на шрифт, установленный на устройстве. Для передачи используйте PDF или изображения либо обеспечьте установку шрифта у получателя.