Плохие шрифты: за что ненавидят comic sans, lobster и papyrus / skillbox media

Функции текстовой утилиты (Text Utility Functions)[править]

renpy.filter_text_tags(s, allow=None, deny=None): Возвращает копию s с отфильтрованными текстовыми тегами. Необходимо задать один из именованных аргументов allow и deny.

allow: Набор тегов, которые разрешены. Если тега нет в этом списке, он удаляется.

deny: Набор тегов, которые запрещены. Если тега нет в этом списке, он сохраняется в строке.

renpy.transform_text(s, function): Преобразует s, оставляя текстовые теги и интерполяцию одинаковыми.

function: Функция, которая вызывается со строками, соответствующими фрагментам текста, и должна возвращать вторую строку, которая заменяет этот фрагмент текста.

init python
    def upper(s):
        return s.upper()

$ upper = renpy.transform_text("{b}Не Upper{/b}")

Плохие сочетания

Образуются из слишком разного противопоставления шрифтов, необоснованного использования (смешивание семейств), смешения слишком разных стилей.

Плохая читаемость

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

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

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

Слишком похожие шрифты

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

Шрифты моветон

Некоторые шрифты признаны дизайнерами как не красивые их использование считается плохим вкусом к ним относят: Comic sans, lobster, Curlz, Papyrus, список постоянно дополняется. Сюда так же относят шрифты плохого качества, которые имеют дефекты контура, недоработанный кернинг, разный масштаб знаков, плохое выравнивание и прочие недоработки.

Особенности замедленного выведения текста (Slow Text Concerns)[править]

Ren’Py позволяет разработчику или пользователю указать, что текст должен выводиться на экран медленно. В этом случае Ren’Py отобразит текст в текстуре, а затем нарисует прямоугольники из текстуры на экран.

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

Горизонтальные артефакты также возможны, когда символы объединены в керн, но эти артефакты менее серьезны, так как они существуют только для одного кадра.

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

◇ Регистрация текста, вышедшего за границыправить

Ren’Py может зарегистрировать случаи, когда текст выходит за пределы области, отведенной для него. Чтобы включить ведение журнала переполнения текста, необходимо выполнить следующие действия:

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

Всякий раз, когда отображается текст, который выходит за пределы доступной области, RenPy регистрирует ошибку в файле text_overflow.txt.

Слишком хороший Lobster

Неформальную гарнитуру Lobster в англоязычном интернете часто называют «новым Comic Sans», указывая на её дурную репутацию.

Изображение: Font Space

На первый взгляд ничего ужасного в шрифте нет — напротив, он весьма красивый и гармоничный. Его создал дизайнер Пабло Импальяри (Pablo Impallari) в 2010 году. Работа очень качественная — прописано более 600 вариантов комбинаций между буквами: это нужно для идеальной стыковки соединительных штрихов, имитирующих ручное письмо. При выпуске гарнитуры допустили единственную оплошность — её сделали бесплатной для коммерческого использования.

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

Зато в России эта гарнитура получила вторую жизнь — в мемах. Если раньше Lobster был стильной дизайнерской фишкой, сейчас он стал чересчур узнаваем и используется в ироничном контексте. Скорее всего, вы видели подобные надписи в соцсетях:

Изображение: Memepedia

Font Candy

Работа с текстом – настоящее искусство, но приложение Font Candy для iPhone значительно упрощает его. В этом ему помогают почти 50 художественных шрифтов. Приложение позволяет применять фильтры для фотографий и надписей. Мощные инструменты для редактирования текста дают возможность добавлять тени, корректировать непрозрачность, наклонять буквы. Font Candy также имеет функции обрезки фотографий и анимации.

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

PicLab

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

После накладывания первого слоя можно использовать карандаш для рисования. Изменения легко отменить. Стандартная версия доступна бесплатно. Есть также HD версия, оптимизированная для iPad. За нее нужно заплатить $2. Устранение водяного знака обойдется в $1.

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

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

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

Сайты и сервисы

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

Fine Words
Сайт с бесплатными красивыми шрифтами: вводите ,и сервис предоставляет список вариантов в разных окошках. Кликаете на кнопку «Скопировать» и после можете вставлять в Инстаграм.

В настройках можно выставить выдачу только на русский шрифт

Piliapp
Еще один онлайн-сервис с бесплатным генератором красивых шрифтов, который действует по тому же принципу: вводим текст и получаем шрифты для оформления Инстаграма. Для копирования – просто кликаем на понравившийся шрифт и потом вставляем в шапку или в текст поста в Инстаграме.

Сайт показывает варианты в нескольких столбцах

Хайп Тайп
Этот генератор отличается от остальных тем, что в его базе более 50 вариантов шрифтов, включая варианты с эмодзи.

Шрифты уже немного устарели

Text Generator
Стильный сайт, где сначала предлагают выбрать шрифт, а потом – в новом окне написать текст. Сервис указывает, какую пропись можно использовать, а еще подсказывает, работает ли шрифт для цифр или заглавных букв. Будет полезно тем, кто использует красивые шрифты в текстах постов.

На сайте шрифты даже отмечены метками «хит» и «новый»

Fonts For Instagram
Большая база шрифтов, правда, большинство не поддерживает русскую раскладку. Подойдет для надписей на английском и цифр.

Шрифты с этого сайта похожи на названия популярных групп начала 2010-х

Pretty Font
Гибкий генератор шрифтов, который похож на конструктор. Здесь можно настроить не только шрифт, но и украшения справа и слева от него, а еще сразу установить эмодзи из большого списка в настройках.

Сайт предлагает гибко настроить будущую надпись – подойдет для шапки профиля

Canva
Сайт-конструктор с широким набором функций: тут можно создавать сторис, презентации и иллюстрации к постам. С помощью него можно менять и настраивать фоны и шрифты, а еще ставить интерактивные стикеры и делать простую анимацию. Все функции доступны в бесплатной версии, а по подписке открывается доступ к дополнительным шрифтам и стикерам. Кстати, в нашем сервисе автопостинга SMMplanner можно публиковать посты сразу из этого онлайн-редактора. Для этого в меню создания поста нужно выбрать пункт «создать с Canva».

Визуальный конструктор Canva – один из самых навороченных, и при этом им легко пользоваться

CSS списки

Списки HTML бывают двух типов — упорядоченные (нумерованные) и неупорядоченные (без нумерации). CSS позволяет изменять символы, цифры или буквы, которые используются для маркировки отдельных элементов списка. Вы даже можете установить свои изображения, в качестве символа списка.

Упорядоченные списки

none — без символа
disc — заполненный круг
circle — круг незаполненный
square — квадрат
decimal — числа арабскими цифрами: 1, 2, 3…
decimal-leading-zero — как decimal, но с дополнительным нулем для цифр от 1 до 9, например. 01, 02, 03
lower-latin — маленькие буквы латинского алфавита: a, b, c, d, e…
lower-greek — маленькие греческие буквы: α, β, γ, δ …
lower-roman — числа римскими цифрами, маленькие: i, ii, iii, iv, v…
upper-latin — заглавные буквы латинского алфавита: A, B, C, D, E…
upper-roman — числа латинскими цифрами, заглавные: I, II, III, IV, V…

Позиционирование списка

Положение списка может управляться свойством list-style-position. Возможные значения:

outside — значение по умолчанию
inside — будет задан дополнительный отступ для списка

Использование собственного изображения

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

На месте kartinka.gif поставить название файла, который вы будете использовать.

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

Список по умолчанию не указывает изображение (list-style-type:none), а свойства padding и margin со значением 0, чтобы не было никаких различий в результатах между браузерами.

Для отдельных элементов списка (li) указывается изображение, которое, конечно, не должно повторяться (background-repeat: no-repeat). С помощью свойства background-position вы можете точно позиционировать изображение, а padding-left требуется для перемещения текста вправо, в противном случае произойдет наложение текста и изображения.

Укороченный стиль для списков

Стили для списков могут быть заданы и с укороченной форме:

Значения в list-style разделяются только интервалом и задаются в таком порядке: type, position, image.

Далее: CSS уроки, 4 часть: блочная модель, рамки, границы, отступы

Post Views:
2 419

Typekit

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

Font color

Как известно любой цвет — это смешанные в определенной пропорции три основных цвета — красный, зелёный и синий.

В HTML цвет задаётся шестнадцатеричным кодом. В шестнадцатеричной системе исчислений используется не десять, а 16 цифр. Первые 10 это цифры от 0 до 9, остальные 6 — обозначаются символами A, B, C, D, E и F. Цвет состоит из трёх пар цифр. Первая пара — обозначает красный цвет, вторая — зелёный, третья — синий. Чем выше значение конкретной пары, тем заметней будет цвет в конкретном оттенке.
#FF0000 — red — красный.
#00FF00 — green — зелёный.
#0000FF — blue — синий.
#000000 — black — чёрный.
#ffffff — white — белый.

Можно также использовать имена цветов на английском red, green, black, yellov, indigo, orange и так далее.
Но на самом деле цвета не всегда соответствуют своим именам. Например, darkgrey (тёмно-серый) светлее, чем grey (серый). Поэтому лучше использовать шестнадцатеричный код.

Для изменения цвета фона используется атрибут bgcolor (цвет фона) тэга .
Например:

В этом примере цвет фона страницы будет зелёный

Для придания нужного цвета тексту используется тэг (шрифт) и его атрибут color (цвет). Пример:Текст, заключённый в этот тег будет зелёный или жёлтый
Можно использовать тэг (интервал) с атрибутом стиля style:Текст, заключённый в этот тег тоже будет зелёный

Тэг кроме color имеет ещё два атрибута — size (размер) и face (гарнитура, начертание).

Приложения для изменения шрифта

Мобильные приложения для изменения шрифта доступны в Play Market и App Store и представлены в разных вариантах:

Бесплатные с рекламой.
Бесплатные без рекламы.
Платные без рекламы.

Функционал большей части сервисов доступен только для латиницы.

Наиболее популярные приложения

I Fonts — Cool & Stylish Fonts for Instagram — бесплатная платформа с рекламой. Подходит для всех смартфонов, корректно редактирует только тексты, написанные латиницей.

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

Fontgram — бесплатный сервис с рекламой, разработанный для работы с текстом. Здесь можно менять шрифт, оформлять фразы в разных стилях.

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

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

В поисках Web-безопасных шрифтов

В интернете исторически сложилось такое понятие как «безопасные» Web-шрифты. Безопасным шрифтом можно назвать такой шрифт, который является стандартным для всех операционных систем. Поскольку о таком положении дел остается только мечтать, то абсолютно безопасных шрифтов не существует!

Отдельные шрифты можно назвать безопасными с некоторыми оговорками.

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространенной операционной системы Windows, которые кроме того используются в других ОС. Примером такого использования служит уже упоминавшийся пакет шрифтов Core fonts for the Web, который, согласно статистике, скачало множество пользователей Unix/Linux.

В это пакет входят следующие шрифты: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings

Все они поддерживают кириллицу, что немаловажно для рунета

В набор шрифтов входящих в стандартную поставку Mac OS X (эта ОС имеет наибольшее распространение среди пользователей Mac OS) входят все шрифты набора Core fonts for the Web.

Таким образом на основе шрифтов Windows, использующихся в других ОС сформировался следующий список так называемых «безопасных» Web-шрифтов:

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

Шрифт Webdings содержит набор пиктограмм, поэтому не может использоваться для контента. Andale Mono не получает широкого применения, поскольку плохо годится для повседневного чтения текста с экрана и есть не у всех пользователей Windows.

Все эти шрифты есть у каждого пользователя Windows, Mac OS X и у подавляющего большинства пользователей Unix/Linux (т.е. у тех, которые установили у себя пакет Core fonts for the Web).

А как же быть с остальными? Ведь хочется, чтобы замысел дизайнера увидело как можно большее число пользователей!

Теги структурного форматирования

<BR> — одиночный тег структурного форматирования, осуществляющий перенос последующего текста на новую строку.

Тег ставится в том месте, где требуется осуществить перенос. Это легко увидеть на следующем примере:

Пример:

Буря мглою небо кроет,<br>
Вихри снежные крутя.<br>
То, как зверь, она завоет,<br>
То заплачет, как дитя.<br><br>

То по кровле обветшалой<br>
Вдруг соломой зашумит,<br>
То, как путник запоздалый,<br>
К нам в окошко застучит.

<P> — контейнерный тег структурного форматирования, создающий новый абзац — </P>

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

Основное различие между тегами <br> и <p> как раз и заключается в наличии/отсутствии пустой строки снизу текста.

Но есть и еще одно существенное отличие: у тега <br> не бывает никаких параметров, а тег <p>, обладает параметром, позволяющим выровнять текст в абзаце.

align — параметр, позволяющий задавать выравнивание текста по ширине, по центру, по левому или правому краю.

Возможные значения этого параметра:

left — выравнивание по левому краю
center — выравнивание по центру
right — выравнивание по правому краю
justify — выравнивание по ширине

Например, если записать:

<p align=»right»>Размещаемый текст</p>

то выравниваться текст будет по правому краю.

Поэкспериментируйте с этими двумя тегами на своей страничке.Не забывайте, что тег <br> — одиночный и не требует закрытия, а <p> — тег контейнерный и закрытия требует.

Любой текст требует заголовка. Заголовок — это квинтэссенция текста, он объединяет все сказанное в нем воедино, выражая суть написанного. В html существуют теги не только для создания заголовка (заголовка первого уровня), но также и для подзаголовка (заголовка 2-го уровня), под-подзаголовка (заголовка 3-го уровня)…под-под-под-под-подзаголовка (заголовка 6-го уровня). Однако на практике для простых текстов применяются заголовки не выше третьего уровня. Тем не менее, вот все теги для создания заголовка и подзаголовков:

<H1> — заголовок первого уровня
<H2> — заголовок второго уровня
<H3> — заголовок третьего уровня
<H4> — заголовок четвертого уровня
<H5> — заголовок пятого уровня
<H6> — заголовок шестого уровня

Название каждого из этих тегов состоит из двух частей: h — сокращения от английского слова header (заголовок); и номера уровня заголовка. Каждый последующий уровень имеет меньший размер шрифта по сравнению с предыдущим. Все шесть тегов являются контейнерными, а значит требуют закрытия. Сам текст заголовка (подзаголовка) помещается внутрь контейнера.

Для горизонтального выравнивания заголовков на странице используется параметр .

В следующем примере объединено использование заголовков и абзацев

Пример:

<h1 align=»center»>Пишущая машинка</h1>

<p>Печатные или пишущие машинки повсеместно применялись в 19-20 веках. В середине прошлого столетия практически ни один офис не обходился без этих устройств. </p>

<p>Но в начале 2000-х годов осталось считанное количество компаний, занимающихся их производством: в 2011 году закрылся последний завод по производству печатных машинок.</p>

<h2 align=»center»>История печатных машинок</h2>

<h3 align=»left»>Изобретение</h3>

<p>В 1714 году Генри Милл получил патент на создание пишущей машинки. Но это не вызвало серьезных изменений. Только спустя 100 лет у людей появляется интерес к машинам, которые «сами пишут». В 1868 году появилась первая популярная печатная машинка «Ремингтон №1».</p>

<h3 align=»left»>Выход из обихода</h3>

<p>В настоящее время устройства вроде пишущих машинок стали неактуальными, вследствие повсеместного распространения компьютеров. </p>

<p>Сегодня порой дешевле купить ноутбук, чем пишущую машинку. Кроме того, по качеству печати принтеры намного превосходят печатные машинки.</p>

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

Typic

Приложение Typic представлено в App Store более чем в 120 странах. Уже это красноречиво свидетельствует о его популярности. В его базе данных сохранены 165 шрифтов, а также 500 элементов графического дизайна. Все это дает пользователю практически неограниченные возможности редактирования. Имеется функция добавления логотипа к фотографии, а также более 100 фильтров для изображений.

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

Информация о шрифте Alexandra Script

Полное название шрифта

Alexandra Script Italic 400

Семейство

Начертание шрифта

Italic (Курсив)

Насыщенность шрифта

400 — нормальное (Normal)

Версия шрифта

Version 1.000 2005 initial release

Идентификатор шрифта

GophmannA.L: Alexandra Script: 2005

PostScript название шрифта

AlexandraScript

Дизайнер шрифта

Gophmann A.L

URL поставщика

Авторское право на шрифт

Поддержка символов

латинские буквы, русские буквы (кириллица), цифры, знаки препинания и пунктуации

Регистр букв шрифта

верхний (прописные буквы) и нижний (строчные буквы)

Категории шрифта Alexandra Script

Бесплатные шрифты, Кириллические шрифты, Латинские шрифты, Наклонные шрифты Italic, Русские шрифты

Предварительный просмотр Alexandra Script

Шрифт Alexandra Script с поддержкой латиницы

Предварительный просмотр шрифта «Alexandra Script» с прописными и строчными латинскими буквами (английский алфавит A-Z и a-z).

Шрифт Alexandra Script с поддержкой кириллицы

Предварительный просмотр шрифта «Alexandra Script» с прописными и строчными русскими буквами (кириллица, русский алфавит А-Я и а-я).

Шрифт Alexandra Script с поддержкой цифр

Предварительный просмотр шрифта «Alexandra Script» с цифрами (0 1 2 3 4 5 6 7 8 9).

Шрифт Alexandra Script с поддержкой знаков препинания и пунктуации

Предварительный просмотр шрифта «Alexandra Script» со знаками препинания и пунктуации (, . / ? ; ‘ : » { } \ | ` ~ ! @ # $ % ^ & * ( ) — _ + =).

Скачать шрифт Alexandra Script

Шрифт Alexandra Script доступен для скачивания в 6 форматах: EOT, OTF, SVG, TTF, WOFF, WOFF2 (IE9 в режиме совместимости, IE6-IE8, Open Type Font, устаревшая iOS, Safari, Android, iOS и любой современный браузер).Внимание! Скачать шрифт Alexandra Script возможно только для некоммерческого использования!

Подробная инструкция по скачиванию шрифтов в статье «Как скачать шрифт на сайте»

Как установить шрифт Alexandra Script на сайт

Для установки шрифта «Alexandra Script» на сайт необходимо скопировать все файлы шрифта в папку, например, «fonts/alexandra-script». В файле стилей подключить шрифт, используя конструкцию CSS:

Скопировать в буфер обмена

@font-face {
	font-family: "Alexandra Script";
	src: url("../fonts/alexandra-script/alexandra-script.eot"); /* IE9 Compat Modes */
	src: url("../fonts/alexandra-script/alexandra-script.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("../fonts/alexandra-script/alexandra-script.otf") format("opentype"), /* Open Type Font */
		url("../fonts/alexandra-script/alexandra-script.svg") format("svg"), /* Legacy iOS */
		url("../fonts/alexandra-script/alexandra-script.ttf") format("truetype"), /* Safari, Android, iOS */
		url("../fonts/alexandra-script/alexandra-script.woff") format("woff"), /* Modern Browsers */
		url("../fonts/alexandra-script/alexandra-script.woff2") format("woff2"); /* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}

Установить шрифт «Alexandra Script» для требуемого текста, поля, кнопки или другого элемента на сайте:

font-family: "Alexandra Script";

Пример применения шрифта «Alexandra Script»:

body {
	font-family: "Alexandra Script";
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.2;
	color: #000;
	background-color: #fff;
}

WebINK

Я сама еще не пользовалась WebINK (пока!), но Томас Финни отзывался о них очень хорошо и назвал несколько преимуществ, которые могут вас заинтересовать: для работы шрифтов не нужен JavaScript (хотя вы все же можете использовать JavaScript, чтобы избежать ненавистного отображения текста без стилей (Flash of Unstyled Text или “FOUT”). Кроме того, Томас говорит, что планка качества у них выше, чем у Typekit или Google Web Fonts; у них более 1,000 шрифтовых семей, 5,000 шрифтов и 80% их шрифтов оптимизированы для Photoshop для создания макетов через плагин — стоит активировать их в Photoshop, и они будут работать как остальные шрифты, без ограничений.

Телеграм-боты для создания красивых шрифтов

Textergram bot
@TexterAsBot
Бот, который работает по тому же принципу, что и сайты: вводим текст и получаем варианты оформления. Далее – копируем и вставляем в пост или шапку профиля.

Русский и английский шрифт, к сожалению, совмещать нельзя

Text Magic
@TextMagicBot
Создает чуть больше десяти вариантов шрифтов на основе отправленного текста. Работает только с английской раскладкой.

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

Pokras
@pokrasikbot

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

Шрифт у этого бота всего один и не самый читаемый