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

FontPlayground

Проект Вэньтин Чжан и Хуа Шу во многом вдохновлен Axis Praxis, но выглядит более современно. В FontPlayground можно точно так же собрать условный лендинг, совместив несколько вариативных шрифтов в разных фреймах. В специальной вкладке приложения отображается CSS-код этого лендинга, который можно скопировать и перенести на сайт. Копировать можно значения как для всей страницы, так и для отдельных блоков.

Композиция, собранная в FontPlayground, открывается во фронтенд-редакторе CodePen, который позволит отредактировать не только CSS, но и Javascript или HTML код.

У FontPlayground есть встроенные шрифты (среди них — Vesterbro, Fit, Input и Roslindale из нашего магазина).

Vesterbro, Fit, Input и Roslindale в FontPlayground

Wakamai Fondue

Wakamaifondue Роэля Нискенса предлагает открыть только один шрифт, но рассказывает о нём всё: показывает статичные начертания, полную кассу и даже цветовые палитры, если шрифт цветной (о том, как работают цветные шрифты, мы рассказывали здесь).

В новой бета-версии Wakamaifondue можно выбрать, сколько осей вариативности вы хотите задействовать в вёрстке и какие опентайп фичи нужно включить по умолчанию, а какие — выключить (это может быть полезно, если сайт, например, на болгарской кириллице, глифы которой доступны только как фича).

В конце длинного списка кастомизируемых блоков Wakamaifondue показывает поле с CSS-кодом, — его можно скопировать и вставить в вёрстку.

В приложение Wakamaifondue можно загрузить свой файл, открыть один из шрифтов Google Fonts или протестировать шрифт дня, который предоставил дружественный дизайнер (например, Дэвид Джонатан Росс).

Spektra в Wakamai Fondue

Typetura

Typetura сначала задает вопросы о том, как устроена текстовая иерархия на вашем сайте, а после — упаковывает весь код, связанный со шрифтом (на CSS, javascript и даже react) так, чтобы шрифт отображался одинаково хорошо на максимальном количестве устройств и в максимальном количестве браузеров. Typetura, например, умеет добавлять в файлы скрипт, который не дает браузеру или ПО принудительно разбить вариативный шрифт на отдельные начертания.

Typetura не предлагает пользователю управлять осями вариативности внутри приложения, но из интерфейса приложения можно в один клик переключиться в редактор кода (CodePen или CodeSandbox).

Typeture в CodePen

BrowserStack и LambdaTest

В приложения BrowserStack и Lambda test можно переходить, когда ваш код уже готов — они помогут протестировать то, как работает шрифт на разных устройствах и в разных браузерах. В обоих сервисах можно посмотреть, как сайт будет выглядеть в разных версиях операционных систем (например, в MacOs Ventura и High Sierra).

Приложения практически повторяют друг друга , но BrowserStack скорее подойдёт разработчикам, которым нужно тестировать небольшие сайты, а Lambda test — команде одного большого продукта, который постоянно обновляется.

Lambda test и BrowserStack работают по подписке, но проверить, поддерживает ли вариативные шрифты нужный вам браузер, операционная система или устройство, можно бесплатно на сайтах сервисов.

Maregraphe Variable на Galaxy S10e (в BrowserStack)

P. S. Прежде, чем встраивать шрифт в вёрстку, проверьте: нужна ли на него лицензия. Это можно сделать как на сайте автора шрифта, так и в приложениях FontPlayground и Wakamaifondue.