Пользовательские шрифты: как добавить в проект

По умолчанию в Taptop доступны шрифты Google Fonts. Вы можете дополнительно добавить в ваш проект пользовательские шрифты, чтобы создать уникальный дизайн сайта.

Видео: Как добавить свой шрифт в Taptop

https://vk.com/video-219751701_456239180

VK Видео | YouTube

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

  1. Пользовательские шрифты доступны только на платных тарифах Business и Team.

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

3. Допустимые форматы шрифтов:

  • ttf — TrueType Font
  • otf — OpenType Font
  • woff, woff2 — Web Open Font Format
  • eot — Embedded OpenType
  • svg — шрифты SVG

4. Одновременно можно загрузить только один файл шрифта. Если у шрифта несколько типов (начертаний), нужно загрузить каждый отдельно. Например, если вам нужны два начертания шрифта — Regular и Bold, необходимо повторить шаги по загрузке шрифта для каждого из них.

Как загрузить пользовательский шрифт в проект

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

Выбрав элемент на холсте, выполните следующие шаги:

  1. На панели Дизайн (Design) в разделе Текст (Text) откройте выпадающий список со шрифтами.

2. Кликните на вкладку Пользовательский (Custom).

3. На вкладке Пользовательский вы можете добавить шрифт в проект, нажав кнопку Загрузить (Upload).

4. Выберите нужный шрифт и нажмите кнопку Открыть.

5. В открывшемся поп-апе выберите параметры шрифта. Эта информация позволит в дальнейшем опознать шрифт при поиске его в списке.

  • Семейство шрифтов (Font family) — вы можете оставить название, сформированное из имени файла, или изменить его по вашему желанию.

Для того чтобы объединить в один шрифт все его начертания, нужно, загружая файлы начертаний, задавать им одинаковое название в поле Семейство шрифтов (Font family). Тогда в списке пользовательских шрифтов будет отображаться одно семейство, при выборе которого будут доступны все его начертания.

  • Насыщенность шрифта (Font weight) — выберите соответствующий вашему шрифту вариант:

  • 100 (тонкий)

  • 200 (экстра легкий)

  • 300 (легкий)

  • 400 (нормально)

  • 500 (средний)

  • 600 (полужирный)

  • 700 (жирный)

  • 800 (очень жирный)

  • 900 (черный)

  • Стиль шрифта (Style):

  • Normal (обычный)
  • Italic (курсив)

  • Параметр «Шрифт поддерживает кириллицу» (The font supports cyrillic) — можно указать, имеет ли шрифт кириллическое начертание. При включенном параметре шрифт будет помечен меткой «К» в списке шрифтов.

6. Нажмите кнопку Загрузить (Upload). Шрифт будет добавлен в список пользовательских шрифтов.

Готово! Пользовательский шрифт добавлен в проект.

Удаление пользовательских шрифтов из проекта пока недоступно, эта возможность будет реализована позже.

Применение пользовательского шрифта к элементам

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

1. Выбор шрифта

Выберите на холсте элемент, к которому хотите применить шрифт. Откройте список пользовательских шрифтов на вкладке Дизайн (Design) в разделе Текст (Text) и выберите нужный шрифт.

2. Выбор начертания

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

Если в списке присутствуют не все загруженные варианты шрифта, обновите страницу.

Применение пользовательского шрифта для части текста в блоке

Если вы хотите стилизовать не весь текст, а отдельные слова или словосочетания, нужно использовать дополнительные стили текста.

Для этого выделите нужную часть текста — на правой панели откроются настройки Встроенного текста (Inline text).

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

Готово! Выбранный шрифт применен к выделенному тексту.

В опциях Встроенного текста вы также можете изменить начертание шрифта, его размер и цвет.