Почему в фигме не работают шрифты
Перейти к содержимому

Почему в фигме не работают шрифты

  • автор:

Гайд по работе с текстом и шрифтами в Фигме

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

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

Выбор шрифта для контента разного типа

Весь текстовый контент на сайтах условно можно разделить на заголовки и основной текст. Так например к основному тексту можно отнести описание в карточке с товарами или параграф в статье. В свою очередь к заголовкам можно отнести пункты меню или название товара, в той же карточке.

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

Связь Figma и Google Fonts

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

Здесь легко найти шрифт под любую задачу, будь это рукописный, кириллический или декоративный шрифт.

Variable шрифты

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

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

Одним из представителей, такого шрифта является Roboto Flex.

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

В первом случае нам нужно перенести конфигурацию в панель настроек Figma. Для этого выберите нужный шрифт (В нашем случае Roboto Flex), нажмите на “. ” (три точки) и в открывшемся меню перейдите на вкладку “Variable”.

Для подключения в css нужно либо скачать шрифт с Google Fonts, либо воспользоваться ссылкой. Оба способа доступны в правом открывшемся sidebar-е.

Как подобрать пару для шрифта

Представим, что у вас есть на примете шрифт, который вам нравится. И вы хотите с одной стороны иметь его в проекте, но с другой найти пару. Которая сочеталась бы с ним. Для этой цели можно использовать генератор шрифтов. В сети их довольно много, но в основном это генераторы, которые сразу предлагают вам готовую пару, но есть и исключение. С помощью Font Joy, можно подобрать пару к уже имеющемуся шрифту.

Для этого выберите нужный вам шрифт в панели слева и зафиксируйте его, нажав на замочек. После чего нажмите на “Generate”. Как пишут сами разработчики, сервис сгенерирует 2 парных шрифта, при помощи ИИ. И да, данный ресурс создает сразу 3 парных шрифта (Для заголовка, подзаголовка и текста). Но если для вас это избыточно, всегда можно отбросить один из них.

Кроме Font Joy также есть Designs AI. По функционалу очень похожи, хотя у второго на мой взгляд более симпатичный интерфейс.

Рукописные, декоративные (и не только) шрифты

Если в вашем проекте планируется использовать, в некоторой степени “необычные” шрифты, то вы опять же можете обратиться к Google Fonts и при помощи фильтров выбрать нужные шрифты, однако даже здесь число этих фильтров довольно скудное (язык, с засечкам/без, рукописные). В общем-то на этом практически все.

Однако, также существует ресурс, с большей вариацией различных типов шрифтов. Это Fonts Online.

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

  • Брать выбранный шрифт и проверять, есть ли он у гугла
  • Добавить этот шрифт дополнительно в Фигму.

Как добавить шрифт, если не хватает стандартных

По большому счету при создании макета в фигме вы можете пользоваться шрифтами только из 2-х источников. Это Google Fonts, как уже было много раз озвучено, и шрифты, которые установлены у вас локально на компьютере. В случае с веб версией, гугловые шрифты доступны сразу, а вот установленные у вас на локальном пк фигма не видит, для этого нужно установить специальное дополнение Font installer.

Устанавливаете его себе на пк и забываете про него. Оно работает в фоновом режиме и будет запускаться при старте системы. Теперь все что вам осталось, скачать нужный шрифт, кликнуть дважды по файлу и нажать кнопку “Install”, чтобы установить шрифт в систему. После этого перезагрузите окно браузера в Фигме и установленный шрифт будет доступен.

Ссылка — на цикл статей по Фигме.

Фигма не видит шрифт(десктоп)?

642d89d0c5e3b636383934.jpeg
Фигма отказывается видеть конкретно этот шрифт. Другие скачанные шрифты видит. Трио офис шрифт находит и корректно работает с ним. Возможно, из-за названия фигма не хочет его видеть, но проблема ещё и в том, что я не могу поменять название шрифта. При этом, это созданный мной шрифт.
642d8f166dc2e592211946.png
642d8c8fa5017692061384.jpeg
Разрешения все менял, всех удалял, всех добавлял — ничего не меняется.
Шрифт переформатировал, удалял, форматировал ещё раз, из ттф в отф.
Сохранил как «веб-формат»:
имя в личной информации менялось на ново-заданное, конвертировал обратно в отф — опять это название в описании, оно «внутреннее», оно всегда отображается как название шрифта в папке windows\fonts и ищется программой по этому имени.

  • Вопрос задан 05 апр. 2023
  • 303 просмотра

Комментировать

Решения вопроса 0

Ответы на вопрос 1

tank666

Дизайнер, Figma-эксперт, автор плагинов для Figma.

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

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

Ответ написан 05 апр. 2023

Комментировать

Нравится 3 Комментировать

Способы добавления дополнительных шрифтов в Фигму

Программа для веб-дизайна Figma автоматически подключает использование Google шрифтов. Соответственно, любой из них становится доступен пользователям. При этом нет необходимости их самостоятельно скачивать и выполнять установку. В случаях, когда имеющихся начертаний недостаточно, возникает необходимость разобраться, как добавить другие шрифты.

  • 1 Как добавить шрифт в декстопную версию Фигма
  • 2 Добавление начертаний в браузерную версию Figma
  • 3 Применение иконочных шрифтов
  • 4 Особенности выбора шрифта
  • 5 Итоги
  • 6 Полезное видео

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

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

  1. Сначала нужно выбрать и скачать подходящий шрифт. Сделать это можно прямо на этом сайте.
  2. После этого потребуется произвести его установку.
  3. Когда она завершится, программу Фигма нужно будет перезагрузить.

Установку на компьютере выполняют обычным образом. Например, работая с Windows, для этого можно воспользоваться одним из следующих способов:

  1. Нужно открыть директорию, где находится скачанный файл. Необходимо сделать двойной клик по названию файла. После этого откроется новое окно, где будет показано, как выглядит начертание. Сверху страницы нужно нажать на кнопку «Установить».
  2. Копируют файл. При помощи Проводника открывают системную папку Windows. Там находят и открывают папку Fonts, куда помещают скопированный файл. После этого работа с ним становится доступной.

фото-1

После этого необходимо перезапустить программу Фигма. Теперь можно работать над проектом с использованием новинки.

Справка! Если нужно добавить несколько начертаний, то можно устанавливать их по очереди или все сразу. В последнем случае их можно выбрать сразу все для копирования в папку Fonts.

Для установки необязательно вносить изменения, относящиеся к системной папке. Можно действовать следующим образом:

  1. Создать папку на компьютере, которая предназначается для добавленных шрифтов.
  2. Поместить туда скачанные файлы.
  3. Открыть панель управления. Сверху справа из выпадающего списка выбирают способ отображения «Мелкие значки».
  4. Ознакомившись со списком разделов, перейти в «Fonts».
  5. С правой стороны находится меню, где нужно выбрать строку «Параметры …».
  6. На открывшейся странице требуется поставить птичку, разрешающие для инсталляции копировать в папку Fonts ярлыки файлов.
  7. Подтвердить сделанное изменение.
  8. Открыть ранее созданную папку, предназначенную для добавленных файлов. Скопировать их ярлыки в системную папку

После перезапуска программы, все начертания будут доступны для использования.

Добавление начертаний в браузерную версию Figma

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

Чтобы правильно настроить Figma для использования любых необходимых вариантов, необходимо сделать следующее:

  1. Нужно открыть официальный сайт программы.
  2. Открыть свой аккаунт и посмотреть профиль.фото-1
  3. Нужно пролистать до раздела Fonts.
  4. Здесь находится большая синяя кнопка «Download installer to enable local fonts». Чтобы загрузить программу инсталляции нужно кликнуть по ней.фото-1
  5. После этого начнётся загрузка приложения.
  6. Программу устанавливают по имеющимся инструкциям.

В результате проведённой инсталляции все шрифты, которые есть на компьютере станут открыты для работы с браузерной версией программы Фигма. Раздел, относящийся к «Fonts», покажет сообщение о том, что они доступны в локальной версии. Теперь их можно использовать для своих проектов и быть полностью уверенными в том, что проблем возникать не будет.

фото-1

Осторожно!При работе над макетом сайта может возникнуть ситуация, когда некоторые шрифты в проекте, над которым ведётся работа, не относятся ни к google fonts, ни к имеющимся на компьютере. При попытке их запустить, Фигма выдаст соответствующее предупреждение.

Невозможность использования может возникнуть из-за различных причин. Это может быть связано с отсутствием определённых типов в операционной системе. Возможна также ситуация, когда они имеются, но отличаются по названию. Исправить ситуацию можно путём установки нужного варианта начертания Если после этого они по-прежнему остаются недоступными, то вкладку с Фигмой необходимо закрыть, а затем открыть снова.

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

Для того, чтобы выполнить замену, нужно открыть окно «Missing fonts». В нём будут приведены сведения обо всех используемых в проекте начертаниях, но отсутствующих в системе шрифтах. Здесь можно выбрать подходящий вариант для замены. Нужно учитывать, что в результате внешний вид проекта может стать немного другим. Поэтому в такой ситуации нужно очень тщательно подбирать новый вид.

Применение иконочных шрифтов

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

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

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

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

Внимание!Иногда над проектом работают несколько разработчиков. Может произойти так, что иконочный шрифт имеется не у всех. В таком случае внешний вид работы будет искажён. Чтобы этого не произошло нужно проследить, чтобы используемые шрифты были у всех разработчиков.

Особенности выбора шрифта

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

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

Начиная подбор шрифта, можно рассмотреть шрифты google fonts нужного типа но с наиболее простыми очертаниями. В этом случае Фигма гарантированно сможет работать с ними при использовании десктопной или браузерной версии без необходимости совершения дополнительных действий. Выбор красивого, оригинального, но трудно читаемого шрифта не всегда оправдан.

Итоги

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

Как добавить шрифт в Figma

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

освойте профессию
графический дизайнер с нуля

Содержание

  1. Шрифты в веб-версии Figma
  2. Шрифты в десктопном приложении Figma

Шрифты в веб-версии Figma

онлайн-тест на профориентацию

Ответьте на 10 вопросов и узнайте, какая дизайн-специальность вам подходит

В веб-версии по умолчанию установлены шрифты из библиотеки Google Fonts. Это большая база, в которой собрано более 1000 популярных, бесплатных шрифтов на разных языках, поэтому установка новых шрифтов для веб-версии будет не такой актуальной.

Шрифты в библиотеке Google Fonts

онлайн-тест на профориентацию

Ответьте на 10 вопросов и узнайте, какая дизайн-специальность вам подходит

Но иногда такая необходимость может возникнуть, если:

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

Как установить новый шрифт в веб-версию

Как установить шрифты от гугл в Figma

  1. Скачайте нужный шрифт на ваш компьютер, откройте файл и нажмите кнопку «Установить».
  2. Перейдите на официальную страницу загрузки компонентов Figma и найдите столбец Font installers. Это программа, которая поможет связать шрифты на компьютере с вашей браузерной версией Figma. В столбце выберите вашу операционную систему (macOS или Windows).

Страница загрузки компонентов в Figma

  • Скачайте файл InstallFigmaAgent.exe. Кликнув по выбранной операционной системе.
  • Установите программу Figma Agent на компьютер, нажав на кнопку Install. Дождитесь окончания установки.
    Скачиваем файл InstallFigmaAgent.exe
  • Теперь нужно убедиться, что локальные шрифты загрузились в веб-версию Figma. Для этого зайдите в ваш аккаунт через браузер, нажав Main menu → Help and account → Account settings. Открывшееся окошко пролистайте до надписи Fonts. Если под ней написано Local fonts are enabled (Локальные шрифты включены). Это значит, что все прошло успешно.

    Проверка загрузки шрифта в Figma

    Убедитесь, что ранее установленный шрифт работает Выберите его для оформления любого текста в вашем проекте.

    Так выглядит добавленный шрифт в Figma

    В дальнейшем все шрифты, которые вы будете добавлять на компьютер через кнопку «Установить», будут автоматически подтягиваться в Figma в браузере благодаря программе Figma Agent. Но если вы переустановите операционную систему, все описанные выше операции по добавлению шрифтов придется проделать заново, так как Figma Agent связан с конкретной системой.

    что такое шрифтовые пары и как их подобрать

  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *