Как добавить шрифт в Figma в браузере
При использовании сторонних шрифтов (не с гугл фонтс) у вас могут возникнуть проблемы при открытии макета в браузере. Браузер изначально подтягивает только шрифты из сервиса google fonts. Других он не видит и поэтому может возникнуть конфликт. Чтобы этого избежать, нужно провести некоторые манипуляции.
Во-первых, зайти через браузер в свой аккаунт фигмы и перейти в свой профиль.
Спустится немного нижи и найти пункт «Fonts» с большой синей кнопкой
Скачиваете эту утилиту и устанавливаете ее, следуя инструкции. Весь процесс занимает буквально 2 минуты. После установки, у вас подтянутся все локальные шрифты, которые находятся на вашем компьютере.
Теперь можете без проблем пользоваться ими и в браузерной версии программы. Бинго!
SIL Open Font License v1.10
This license can also be found at this permalink:
https://www.fontsquirrel.com/license/amatic
Copyright (c) 2011 by vernon adams (vern@newtypography.co.uk),
with Reserved Font Names “Amatic” “Amatic Bold” and “Amatic Regular”
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
—————————————————————————————-
SIL OPEN FONT LICENSE Version 1.1 — 26 February 2007—————————————————————————————-
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
DEFINITIONS
“Font Software” refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
“Reserved Font Name” refers to any names specified as such after the copyright statement(s).
“Original Version” refers to the collection of Font Software components as distributed by the Copyright Holder(s).
“Modified Version” refers to any derivative made by adding to, deleting, or substituting—in part or in whole—any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
“Author” refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are not met.
Просмотр шрифтов Windows
Данный класс утилит предназначен для просмотра шрифтов, которые есть в вашей системе. Такие утилиты особенно востребованы для офисных программных комплексов. К примеру, издательское дело, в нем используется широкий ассортимент шрифтов.
Представьте себе, что вам надо быстро подобрать необходимый шрифт из очень длинного списка. Открывать каждый из шрифтов и запоминать «как смотрелся текст» — не лучшая затея. Если рассматривать через призму разработки, то любое программное обеспечение, в котором есть хоть какие-нибудь шрифты, кроме тахома и ариал, потребует тщательного отбора. Ведь от множества параметров зависит (включая даже цвет и заливку) подойдет ли тот или иной шрифт. При определенных стечениях обстоятельств даже красивый шрифт может стать раздражающим или нечитаемым.
Безусловно, такие утилиты стоит так же использовать для просмотра карт символов. Такие карты представляют собой набор пар «код — символ». Хотя, на уровне обычного пользователя карта обычно представляется просто набором символов, без указания кода. Самый простой пример. Когда вы хотите вставить какой-нибудь оригинальный символ в текст документа по средствам офисных программ. Или, например, как раньше, вставляли в логины уникальные символы, которые можно было набрать только через комбинации Alt + код.
Старые утилиты для просмотра шрифтов поддерживают только ASCII или ANSI набор из 256 символов. Такие утилиты на сегодняшний день уже не самые актуальные, так как Unicode используется уже практически везде. Но, тем не менее применение им можно найти и сегодня.
Если вам необходима более широкая функциональность, включая управление шрифтами в системе, то вам стоит ознакомиться с утилитами из обзора Лучшие бесплатные менеджеры шрифтов.
Основные виды лицензий на шрифты
Классическая схема состоит из трёх основных типов шрифтовых лицензий: Desktop, Web и App. Её придерживаются многие шрифтовые студии, а также магазины, которые шрифты продают. Среди них type.today, Letterhead.store, , Fontshop.
Desktop
Этот тип лицензии разрешает устанавливать шрифт на компьютер, чтобы разработать дизайн-макет со статичной графикой. Это может быть растровая или векторная графика для печати или для веба. Как правило, правообладатель разрешает использовать шрифт не только на бумаге, но и на других поверхностях, например, одежде. Стоимость определяется не тиражом продукции, а количеством компьютеров, на которые будет установлен шрифт.
Покупатели шрифтов по лицензии desktop чаще всего получают файлы в формате OTF.
Можно ли использовать шрифт с лицензией Desktop для создания логотипа? К этому студии и магазины относятся по-разному. Например, type.today не берёт за это дополнительной платы, а в Paratype нужно покупать отдельную лицензию «Лого». Такие нюансы обычно прописаны в лицензионном соглашении.
Web
Лицензия Web даёт право использовать шрифт в оформлении сайта. Стоимость определяется трафиком, при этом одни правообладатели оценивают его по количеству просмотров страниц сайта, другие — по числу уникальных посетителей.
После покупки веб-дизайнеры обычно получают шрифт в формате TTF, WOFF, WOFF2 или EOT. Причём его нужно разместить на сервере — устанавливать такой шрифт на компьютер нельзя, для этого нужна лицензия Desktop.
App
Шрифты с такой лицензией можно использовать только в мобильных приложениях.
Стоимость зависит от количества приложений. Paratype и Brownfox считают версии для разных платформ — iOS и Android — одним приложением. Но бывает и по-другому.
Как добавить иконочный шрифт FontAwesome в Figma
Помимо стандартных шрифтов есть возможность загрузить иконочные шрифты от популярного сервиса Font Awesome. Для тех, кто не знает, Font Awesome — это сервис, который позволяет вставлять иконки через обычный шрифт, а не через файл svg. Это бывает удобно, когда лень скачивать какую-то иконку. Вместо этого можно просто ее «написать».
Спускаетесь вниз и находите пункт «Desktop»
И далее нажимаете на кнопку «Download for free»
У вас скачается шрифт и вам нужно просто установить его себе на компьютер по тому принципу, который мы рассматривали в начале статьи. При распаковке, шрифты будут находиться в папке otfs, там их 3 штуки, все 3 и надо установить.
Принцип работы иконочного шрифта в Фигме
Для начала создайте текстовую пустую область с помощью инструмента «Text».
Далее перейдите на сайт fontawesome.com. Там будут все иконки, которые доступны для использования. Они подразделяются на 3 вкладки «Solid», «Regular» и «Brands».
Solid — это иконки с заливкой, Regular — с обводкой, а Brands — иконки брендов. В зависимости от типа иконки вам нужно выбирать и соответствующий шрифт в фигме. Для использования нужно выделить иероглиф иконки и выбрать пункт «Копировать».
Далее перейти в figma и в текстовый контейнер вставить нашу иконку.
У нас ничего не отображается, потому что выбран шрифт «Roboto». Нам нужно выбрать шрифт Font Awesome. Я копировал иконку из раздела «Solid», поэтому именно такой шрифт я и выбираю. После этого моя иконка корректно отобразится.
Чтобы манипулировать размерами иконки, нужно изменять размеры шрифта. Помимо этого, вы можете легко перевести иконку в вектор и пометить для экспорта. Для этого достаточно выбрать текстовый контейнер и нажать сочетание клавиш Ctrl+Shift+O.
Fontedge.matton.se – узнавание шрифта онлайн
Сервис fontedge.matton.se по своему поисковому инструментарию похож на описанные выше аналоги. При этом его функционал работает достаточно нестабильно, потому мы поместили его в конец нашего списка.
Работа с сервисом состоит примерно в следующем:
- Загрузите изображение с нужным шрифтом на ресурс;
- Кликните на букве с опознаваемого слова;
- Проверьте, правильно ли опознана нужная буква;
-
Внесите букву в идентификационный список;
Функционал ресурса fontedge.matton.se
- Повторите операцию для ещё нескольких различных букв;
- Заполните буквенное поле;
- Кликните на стрелку запуска идентификации;
- Просмотрите полученные результаты.
Онлайн-сервисы
Для тех, кто не хочет ничего скачивать на устройство, есть альтернативный вариант – использование онлайн-инструментов.
FontArk
Браузерный инструмент для создания шрифтов, с помощью которого можно рисовать символы. Сервис предлагает автоматическую отрисовку контура, в результате чего легко настраивать толщину и округлость элементов, есть также возможность использования шаблонов. Менять можно и сразу несколько символов, созданный шрифт экспортируется в файл OTF, возможен предварительный просмотр.
Calligrapher
Веб-сервис позволяет легко превратить рукописный текст, загруженный в одном из поддерживаемых форматов изображений (PDF, PNG, TIFF, JPG), в векторный шрифт. Можно нарисовать несколько вариантов одного символа, которые будут использоваться в случайном порядке, что сделает шрифт более интересным. После обработки вы получаете готовый файл OTF или TTF. Инструмент позволяет также редактировать фонты, причём необязательно в одной сессии.
Cheap Font Generation
Платная онлайн-программа, позволяющая сделать шрифт из собственного почерка. Созданный набор символов можно использовать в различных программах и системах Windows, Mac или Linux. Загрузка готового файла TTF обойдётся в 4.99$
YourFonts
Ещё один онлайн-генератор, с помощью которого можно оцифровать свой почерк, превратив его в уникальный векторный шрифт (загрузка 9.95$), доступный для использования в приложениях и системах Windows, Mac и Linux.
Перечисленные инструменты отличаются функциональностью, предполагая возможность использования разных средств для создания и изменения шрифтов. Некоторые из них предоставляют широкое поле деятельности для творчества, другие – скромный базовый набор опций, при этом, работая с символами, не стоит сильно увлекаться и забывать о читаемости текста, ведь это одно из главных условий грамотного использования типографики.
Как установить шрифт Inform Cyr Bold на сайт
Для установки шрифта «Inform Cyr Bold» на сайт необходимо скопировать все файлы шрифта в папку, например, «fonts/inform-cyr-bold». В файле стилей подключить шрифт, используя конструкцию CSS:
Скопировать в буфер обмена
@font-face { font-family: "Inform Cyr Bold"; src: url("../fonts/inform-cyr-bold/inform-cyr-bold.eot"); /* IE9 Compat Modes */ src: url("../fonts/inform-cyr-bold/inform-cyr-bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/inform-cyr-bold/inform-cyr-bold.otf") format("opentype"), /* Open Type Font */ url("../fonts/inform-cyr-bold/inform-cyr-bold.svg") format("svg"), /* Legacy iOS */ url("../fonts/inform-cyr-bold/inform-cyr-bold.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/inform-cyr-bold/inform-cyr-bold.woff") format("woff"), /* Modern Browsers */ url("../fonts/inform-cyr-bold/inform-cyr-bold.woff2") format("woff2"); /* Modern Browsers */ font-weight: normal; font-style: normal; }
Установить шрифт «Inform Cyr Bold» для требуемого текста, поля, кнопки или другого элемента на сайте:
font-family: "Inform Cyr Bold";
Пример применения шрифта «Inform Cyr Bold»:
body { font-family: "Inform Cyr Bold"; font-size: 1rem; font-weight: normal; line-height: 1.2; color: #000; background-color: #fff; }
Как студии отслеживают, кто использовал их шрифты?
Если украденный шрифт дизайнер использовал в личных целях, например, оформил им письмо и отправил его другу, то правообладатель об этом, скорее всего, не узнает. Однако если такой шрифт «засветится» в коммерческом проекте, например, его используют в оформлении книги, которая будет продаваться в магазинах, то конфликта с разработчиком или студией не избежать.
— Пиратское использование шрифтов отслеживает наш партнёр — компания «Логард». Её сотрудники целенаправленно ходят по сайтам, просматривают печатные издания, вывески и проверяют, есть ли у тех, кто применил наш шрифт, лицензия. Если они её не находят, то обращаются к компании, которая использовала шрифт незаконно. Часто эти фирмы отвечают, что их о необходимости купить лицензию не предупредил дизайнер.
Как добавить шрифт в Figma с компьютера
Если вы используете приложение фигмы, то помимо шрифтов из сервиса google fonts, у вас доступны все те шрифты, которые установлены на вашем компьютере. Если вы хотите использовать какой-то декоративный шрифт, которого нет на гугл фонтс, то сначала вам нужно установить его себе на компьютер. Затем перезагрузить программу и шрифт станет доступен для работы.
Как установить шрифт себе на компьютер? Очень просто. Скачиваете нужный вам шрифт, распаковываете архив, переходите в папку со шрифтом, выбираете шрифт (один или несколько), нажимаете правой кнопкой мыши и выбираете пункт «Установить для всех пользователей».
Можете устанавливать по одному, а можете выбрать сразу все и установить все разом. Помимо этого, можно просто перенести нужные вам шрифты в локальную папку со шрифтами на вашем компьютере. На windows она находится в «Панели управления». Если вы используете 10-ку, то сперва переключите вид на «Мелкие значки», тогда вы сразу увидите нужную вам папку.
Выбираете необходимые шрифты и переносите их туда. Либо стандартным сочетанием клавиш ctrl+c/ctrl+v.
Как сделать жирный шрифт
Затрудняет использование онлайн редактора Figma то, что в нём нет русского языка. Хотя он поддерживает русские буквы при добавлении надписи в проекте. В версии онлайн инструменты для изменения текста находятся справа. Здесь же вы сможете найти параметр для переключения на жирный, курсив или обычное начертание.
Добавляем текст в проект.
Выделяем его курсором или двойным кликом по площади текста.
Обратите внимание на блок под названием Text. Здесь будет одно из значений текущего шрифта: Regular, Italic, Bold.
Нажмите на это значение, чтобы появилась возможность выбрать другое пердставление текста.
Чтобы сделать его жирным, выберите Bold, курсив – Italic, обычный – Regular.. Рядом с параметром начертания находится параметр изменения размера текста
Выберите текущую цифру, чтобы указать необходимый. В этом блоке находятся и другие параметры: высота текста, расположение (по центру, справа и т.д.), размер отступов
Рядом с параметром начертания находится параметр изменения размера текста. Выберите текущую цифру, чтобы указать необходимый. В этом блоке находятся и другие параметры: высота текста, расположение (по центру, справа и т.д.), размер отступов.
Как сделать текст по кругу в Фигма
- Теперь заходим в проект.
- Нажимаем вверху слева кнопку меню и выбираем пункт Plugins.
- Выбираем плагин с названием Circular Text и вводим в пустую строку слово или фразу, которую нужно изобразить по кругу.
- Выбирайте начертание шрифта, название, размер – всё так же, как с обычным текстом. Увеличивайте размер круга при помощи регуляторов по углам.
Если нажать на кнопку с точками внизу круга, все буквы рассыпятся в выделенной области случайным образом. Большинство нестандартных возможностей со шрифтами или текстом в Figma доступны через плагины. Тем, кому понравился этот онлайн инструмент, нужно более детально разобраться со списком плагинов. Изучить их возможности.
Узнать шрифт по картинке онлайн – особенности реализации
Для реализации данной задачи можно воспользоваться рядом сетевых ресурсов (преимущественно англоязычных), которые я перечислю ниже. Работа с ними довольно шаблонна: вы переходите на такой онлайн-ресурс, загружаете на него картинку с нужным вам шрифтом (или указываете на такую картинку ссылку в сети), при необходимости отмечаете нужный для распознавания текст. Также некоторые ресурсы могут запросить определение ещё нескольких параметров (к примеру, имеет ли текст утолщения), после чего происходит распознавание нужного шрифта.
После прохождения процедуры распознавания шрифта сайт предложит вам визуально определить, правильно ли распознаны цифры и буквы (при необходимости будет нужно провести самостоятельную корректировку, указав правильный символ). После этого сайт выдаст вам ряд названий схожих визуально шрифтов, а некоторые продвинутые ресурсы предложат скачать понравившийся шрифт к себе на ПК.
При этом учтите, что шрифт на картинке должен находиться в горизонтальном положении, символы должны быть качественно отделены друг от друга. И иметь достаточную высоту (при необходимости используйте Photoshop или другой визуальный редактор для подгонки текста под указанные требования). Вам может быть полезна статья по уменьшению шрифта на компьютере с помощью клавиатуры.
Распознать нужный шрифт иногда бывает довольно тяжело
Информация о шрифте Russia-Bold
Полное название шрифта
Russia Bold 700
Семейство
Начертание шрифта
Bold (Жирный)
Насыщенность шрифта
700 — жирное (Bold)
Версия шрифта
Version 1.000 Betta
Идентификатор шрифта
DA: Russia Bold: 2010
PostScript название шрифта
Russia-Bold
Авторское право на шрифт
Copyright (c) 2009 by DA. All rights reserved.
Поддержка символов
латинские буквы, русские буквы (кириллица), цифры, знаки препинания и пунктуации
Регистр букв шрифта
верхний (прописные буквы) и нижний (строчные буквы)
Категории шрифта Russia-Bold
Бесплатные шрифты, Кириллические шрифты, Латинские шрифты, Русские шрифты, Шрифты без засечек
Предварительный просмотр Russia-Bold
Шрифт Russia-Bold с поддержкой латиницы
Предварительный просмотр шрифта «Russia-Bold» с прописными и строчными латинскими буквами (английский алфавит A-Z и a-z).
Шрифт Russia-Bold с поддержкой кириллицы
Предварительный просмотр шрифта «Russia-Bold» с прописными и строчными русскими буквами (кириллица, русский алфавит А-Я и а-я).
Шрифт Russia-Bold с поддержкой цифр
Предварительный просмотр шрифта «Russia-Bold» с цифрами (0 1 2 3 4 5 6 7 8 9).
Шрифт Russia-Bold с поддержкой знаков препинания и пунктуации
Предварительный просмотр шрифта «Russia-Bold» со знаками препинания и пунктуации (, . / ? ; ‘ : » { } \ | ` ~ ! @ # $ % ^ & * ( ) — _ + =).
Скачать шрифт Russia-Bold
Шрифт Russia-Bold доступен для скачивания в 6 форматах: EOT, OTF, SVG, TTF, WOFF, WOFF2 (IE9 в режиме совместимости, IE6-IE8, Open Type Font, устаревшая iOS, Safari, Android, iOS и любой современный браузер).Внимание! Скачать шрифт Russia-Bold возможно только для некоммерческого использования!
Подробная инструкция по скачиванию шрифтов в статье «Как скачать шрифт на сайте»
Как установить шрифт Russia-Bold на сайт
Для установки шрифта «Russia-Bold» на сайт необходимо скопировать все файлы шрифта в папку, например, «fonts/russia-bold». В файле стилей подключить шрифт, используя конструкцию CSS:
Скопировать в буфер обмена
@font-face { font-family: "Russia-Bold"; src: url("../fonts/russia-bold/russia-bold.eot"); /* IE9 Compat Modes */ src: url("../fonts/russia-bold/russia-bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/russia-bold/russia-bold.otf") format("opentype"), /* Open Type Font */ url("../fonts/russia-bold/russia-bold.svg") format("svg"), /* Legacy iOS */ url("../fonts/russia-bold/russia-bold.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/russia-bold/russia-bold.woff") format("woff"), /* Modern Browsers */ url("../fonts/russia-bold/russia-bold.woff2") format("woff2"); /* Modern Browsers */ font-weight: normal; font-style: normal; }
Установить шрифт «Russia-Bold» для требуемого текста, поля, кнопки или другого элемента на сайте:
font-family: "Russia-Bold";
Пример применения шрифта «Russia-Bold»:
body { font-family: "Russia-Bold"; font-size: 1rem; font-weight: normal; line-height: 1.2; color: #000; background-color: #fff; }
Нужно ли заказчику дизайна покупать лицензию на шрифт?
На этот вопрос нет однозначного ответа, нужно читать лицензионные соглашения каждого конкретного распространителя шрифтов.
К примеру, type.today не обязывает заказчика покупать лицензию, если дизайнер передал ему макет, переведённый в кривые. Исключение — случай, когда клиент дизайнера собирается использовать этот шрифт в будущих проектах.
У витрины tomorrow другая логика — заказчика здесь воспринимают полноценным пользователем если не шрифтовых файлов, то уникального дизайна, поэтому он должен купить второй пакет лицензий соразмерно масштабу бизнеса: для небольшого бренда пакет будет минимальным, для крупной фирмы — средним или большим.
Как установить плагин в Фигма
Плагин – это небольшой скрипт в нашем случае, который добавляется в Figma. Он позволяет открыть новые возможности, которых ранее не было в редакторе. С их помощью Фигму можно превратить в ещё более удобный и полезный инструмент.
- Чтобы найти плагины в Figma онлайн, нужно открыть главное меню (не проект).
- Затем выбрать слева в меню пункт Community.
- В основном окне найдите две едва заметные вкладки и выберите Plugins.
- Ниже находится список плагинов для Фигмы. Чтобы установить один из них, нажмите кнопку Install напротив.
Возможно, во всех нет необходимости, но среди них можно найти полезные инструменты. Unsplash – сервис, помогающий быстро найти фотографии в хорошем качестве. Iconify – содержит сотни прикольных иконок, которые можно будет использовать в своём проекте. Плагин Handz предоставляет трёхмерные, разноцветные иконки рук в виде указателей.
Подробнее о других плагинах и их возможностях рекомендую почитать в этой инструкции на русском языке. Выбирайте категорию в меню, чтобы найти нужный плагин. Или пишите его название в поисковой строке.