Как добавить шрифт в Figma: инструкция для браузера и десктопа

Чтобы добавить свой шрифт в Figma, сначала установите файл TTF или OTF в операционную систему. В десктопном приложении Figma локальные шрифты доступны через встроенный font helper. В браузере дополнительно нужен Figma Font Installer, который в системе отображается как FigmaAgent. После установки обновите вкладку Figma или перезапустите приложение.

Материал актуализирован на 14 сентября 2026 года по текущей справке Figma. В старой версии статьи были неточности: Adobe Fonts на самом деле работают и в браузерной Figma при установленном Font Installer, а после установки нового локального шрифта Figma рекомендует обновить браузерный файл или перезапустить desktop-приложение.

Главный вывод

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

Павел Алтунин — UX/UI дизайнер, веб-дизайнер

Как добавить шрифт в Figma — инструкция в 30 секунд

Какие шрифты доступны в Figma по умолчанию

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

Если нужен брендовый, коммерческий или редкий шрифт, его можно подключить отдельно. Figma для локальных пользовательских шрифтов поддерживает .TTF и .OTF.

Если вы выбираете шрифт для русскоязычного интерфейса, посмотрите отдельную подборку Yudaev School — 10 бесплатных кириллических шрифтов Google Fonts. А если гарнитура есть только на скриншоте, пригодится инструкция как определить шрифт по изображению.

Какой способ подключения шрифта выбрать

Как добавить шрифт в веб-версию Figma

В браузере Figma не может сама прочитать произвольный локальный файл шрифта. Для доступа к установленным в системе шрифтам нужен официальный Figma Font Installer — процесс FigmaAgent, который работает локально на компьютере и соединяется с figma.com.

1. Скачайте шрифт в формате TTF или OTF

Скачайте файлы из официального источника, магазина шрифтов или библиотеки с понятной лицензией. Если семейство содержит отдельные файлы Regular, Medium, Bold и другие, установите те начертания, которые действительно будут использоваться.

2. Установите шрифт в Windows или macOS

Windows: распакуйте ZIP, нажмите по файлу TTF/OTF правой кнопкой и выберите Install или Install for all users. Microsoft также позволяет управлять шрифтами через Settings → Personalization → Fonts.

macOS: откройте файл через Font Book и нажмите Install. Font Book автоматически проверяет шрифт на ошибки и дубликаты.

3. Установите Figma Font Installer

Откройте официальную инструкцию Add a font to Figma и скачайте Font Installer по ссылке Figma. В системе он называется FigmaAgent и работает без отдельного окна.

Figma поясняет, что FigmaAgent запускает локальный HTTP/HTTPS-сервис на localhost, принимает соединения только от figma.com и не выставляется в публичный интернет.

4. Разрешите Figma доступ к локальному приложению

Современные версии Chrome могут отдельно спрашивать разрешение на связь сайта с приложением на компьютере. Если доступ заблокирован, локальные шрифты не появятся в font picker.

Проверьте в Figma Preferences → Permissions and helpers. В Chrome соответствующее разрешение может называться Apps on device или Local network access — название зависит от версии браузера.

5. Обновите файл и найдите шрифт

После установки Font Installer обновите открытый файл Figma. Выберите текстовый слой, откройте список шрифтов и используйте фильтр Installed by you. Там Figma показывает локально установленные гарнитуры.

Как добавить шрифт в десктопную версию Figma

В приложении Figma Desktop отдельный Font Installer ставить не нужно: helper уже включён в desktop-приложение. Установите TTF/OTF в систему обычным способом, затем откройте Figma.

Если Figma уже была открыта во время установки, а новая гарнитура не появилась, перезапустите desktop-приложение. Это соответствует актуальной рекомендации Figma и надёжнее старого совета «перезапуск не требуется».

Если вы только осваиваете редактор, базовые панели, файлы и режимы подробно разобраны в материале «Что такое Figma и зачем она нужна дизайнерам». А когда с типографикой всё настроено, следующий логичный шаг — интерактивный прототип в Figma.

Практический совет

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

Павел Алтунин — UX/UI дизайнер, веб-дизайнер

Как загрузить шрифт в аккаунт Figma

В актуальной Figma появился ещё один сценарий — Your uploaded fonts. Он особенно полезен, если шрифт должен быть доступен вашему аккаунту и использоваться функциями Figma, которые работают на сервере, включая MCP и agent.

1. Откройте file browser Figma.
2. Нажмите на аватар → Settings.
3. Откройте Account → Your uploaded fonts.
4. Нажмите Upload fonts и выберите файл.
5. Подтвердите, что у вас есть права на загрузку и использование шрифта.

После этого гарнитура отображается в разделе Uploaded by you в font picker.

Как добавить шрифт для всей команды или организации

Для Organization и Enterprise Figma позволяет администратору загружать собственные шрифты на уровень организации или отдельной команды. После этого участникам не нужно ставить файлы локально на каждый компьютер.

• Вся организация: Admin → Resources → Fonts → Font.
• Отдельная команда: Team settings → View team’s fonts → Upload fonts.
• Загружать можно TTF/OTF; Figma просит подтвердить права и лицензию.

Это особенно полезно для фирменных гарнитур и дизайн-систем. Если вы работаете над айдентикой, посмотрите также материал Yudaev School про фирменный стиль и систему визуальных правил.

Как использовать Adobe Fonts в Figma

В старой статье было сказано, что Adobe Fonts в браузерной версии напрямую не поддерживаются. Сейчас это формулировать так нельзя: Figma официально указывает, что Adobe Fonts можно использовать и в браузере, и в desktop-приложении.

Сначала активируйте нужный шрифт через Adobe Fonts на компьютере. В desktop Figma он будет доступен как локальный. В браузере дополнительно нужен Figma Font Installer. После добавления шрифта Figma рекомендует перезапустить приложения Adobe/Figma или обновить вкладку браузера.

Что делать на Linux и Chromebook

Для обычных локальных шрифтов Figma указывает ограничение: на ChromeOS и Linux нельзя подключить дополнительные локальные гарнитуры тем же способом, что на Windows и macOS. По умолчанию остаются Google Fonts и доступные Apple fonts.

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

Отдельный случай: шрифты в Figma Sites

Если вы проектируете сайт в Figma Sites, локального TTF/OTF достаточно для работы в редакторе, но для публикации пользовательского шрифта Figma просит загрузить веб-файл WOFF или WOFF2 в Site settings → Fonts.

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

Если вам важно понимать, как шрифты затем подключаются уже в обычной веб-разработке, читайте отдельный разбор шрифтов в HTML и CSS.

Где брать шрифты для Figma

Главное правило — не путать возможность скачать файл с правом использовать его в коммерческом проекте.

• Google Fonts — большая библиотека open-source-шрифтов; Google разрешает коммерческое и некоммерческое использование.
• Adobe Fonts — библиотека для пользователей Adobe; условия зависят от лицензии Adobe и конкретного сценария.
• Font Squirrel — каталог шрифтов; лицензию всё равно проверяйте для конкретной гарнитуры.
• MyFonts — коммерческий маркетплейс с разными типами лицензий.
• DaFont — много бесплатных и условно бесплатных файлов, но условия задаёт автор конкретного шрифта; проверяйте лицензию особенно внимательно.

Почему шрифт не отображается в Figma: 7 частых причин

1. Шрифт не установлен в системе. Проверьте Windows Fonts или Font Book.
2. В браузере не установлен Figma Font Installer. Без него локальные шрифты не попадут в Figma.
3. Браузер заблокировал локальный доступ. Проверьте Permissions and helpers и разрешение Apps on device / Local network access.
4. Открыта старая вкладка. После установки обновите файл; desktop-приложение при необходимости перезапустите.
5. Не хватает конкретного начертания. Например, коллега использовал Bold, а у вас установлен только Regular.
6. У участников разные версии одного шрифта. Название может совпадать, но метрики и данные файла различаются.
7. Вы работаете на Linux/ChromeOS с локальным шрифтом. Этот сценарий Figma официально не поддерживает; используйте доступные встроенные шрифты или организационную загрузку там, где она доступна.

Рабочий принцип

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

Павел Алтунин — UX/UI дизайнер, веб-дизайнер

FAQ: частые вопросы про шрифты в Figma

Какие форматы шрифтов поддерживает Figma?

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

Как добавить свой шрифт в Figma через браузер?

Установите TTF/OTF в Windows или macOS, затем установите официальный Figma Font Installer (FigmaAgent), разрешите браузеру локальный доступ и обновите открытый файл. В font picker ищите гарнитуру через фильтр Installed by you.

Нужен ли Figma Agent для десктопной Figma?

Отдельно устанавливать его не нужно. Figma Desktop уже включает font helper и умеет читать шрифты, установленные на компьютере.

Работают ли Adobe Fonts в браузерной Figma?

Да. Активируйте шрифт через Adobe Fonts на компьютере и установите Figma Font Installer. В desktop-приложении отдельный installer не нужен.

Почему у коллеги в Figma появился Missing font?

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

Можно ли установить локальный шрифт в Figma на Linux?

Figma официально не поддерживает дополнительные локальные шрифты на Linux и ChromeOS. На Organization/Enterprise администратор может загрузить кастомный шрифт в команду или организацию, что позволяет использовать его и на таких устройствах.

Как удалить шрифт из Figma?

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

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

Нет. Нужно проверить лицензию конкретной гарнитуры. Например, Google Fonts распространяются по open-source-лицензиям и разрешены для коммерческих проектов, а у шрифтов с маркетплейсов или авторских сайтов условия могут отличаться.

Как прокачать Figma и типографику

Авторитетные источники

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

1. Figma Help — Add a font to Figma
2. Figma Help — Missing font alert
3. Figma Help — Troubleshoot the Figma Font Installer
4. Figma Help — Local network access
5. Figma Help — Adobe Fonts in Figma
6. Figma Help — Upload custom fonts to an organization
7. Figma Help — Custom fonts in Figma Sites
8. Microsoft Support — Manage fonts in Windows
9. Apple Support — Install and validate fonts in Font Book
10. Google Fonts — licensing and usage