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

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

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

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

  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 нужного типа но с наиболее простыми очертаниями. В этом случае Фигма гарантированно сможет работать с ними при использовании десктопной или браузерной версии без необходимости совершения дополнительных действий. Выбор красивого, оригинального, но трудно читаемого шрифта не всегда оправдан.

Полезно почитать: Как установить шрифт на Андроид

Итоги

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

Полезное видео

Практический урок:

Комментарии

Подпишись на 3d graphics

Информация о мире трехмерной графики. Уроки, советы, новости и материалы о создании и визуализации 3D-графики.

Подписаться!