От автора: если вы задумываетесь, как использовать Google Fonts на своем веб-сайте или в веб-приложении, то рассмотрите несколько дополнительных действий, которые могут дать вам гораздо более быстрое время загрузки. В этой статье я покажу вам, как это сделать: Пропустить время ожидания загрузки шрифтов из Google Fonts Разместить шрифты на собственном хостинге для большей скорости и большего контроля над FOIT и ...

От автора: дескриптор font-display блоков @font-face действительно хорош. Само по себе это имеет большое значение для улучшения воспринимаемой производительности загрузки веб-шрифтов. Загрузка веб-шрифтов — сложная задача, и наличие инструмента, который работает так хорошо, как он, имеет большое значение для Интернета. Это настолько большое дело, что Pagespeed Insights / Lighthouse от Google предупредят вас, если вы не используете его. Горькая ирония ...

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

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

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

От автора: сегодня мы поговорим про общее семейство шрифтов CSS. Если у вас есть некий опыт написания CSS, вы наверняка делали что-то похожее и, вероятно, несколько раз в одном файле стилей.   body { font-family: Arial, Helvetica, sans-serif; } Единственное объявление в приведенном выше правиле — это то, что обычно называют стеком шрифтов. Эта строка определяет шрифт, который браузер должен ...

От автора: пользовательский шрифт не является чем-то новым в Интернете, но его использование все же может стать одним из факторов замедления сайта и увеличения стоимости для конечного пользователя. Если вы не очень внимательный, все очень быстро повалится из рук, как в запросе, который я сделал в HTTP Archive. Учитывая это, мы в MDN Web Docs экспериментируем с уменьшением влияния пользовательских ...

От автора: оптимизация шрифтов получила новые возможности! Теперь использовать пользовательские шрифты стало легче и быстрее. Давайте разберем, что можно сделать при использовании пользовательских шрифтов, чтобы максимально повысить производительность. Предстоящая версия Microsoft Edge реализует unicode-range (последний современный браузер, который сделает это). Предварительная загрузка и font-display появятся в Safari и Firefox Переменные шрифты доступны во всех браузерах Уменьшите размер файла Помимо цифр, ...

От автора: Thierry Blancpain – бренд-дизайнер, работает в Informal Inquiry в Нью-Йорке, является сооснователем Grilli Type, семейсива шрифта Swiss. Статья применима ко всем веб-шрифтам, однако в качестве примеров концепций используются шрифты Grilli Type, в частности те, которые демонстрируют функции OpenType. Использовать свои шрифты вместо системных становится все проще, но тема все еще развивается. Мы разберем разные форматы шрифтов для веб, ...

Перевод статьи How to use variable fonts in the real world с сайта clearleft.com для CSS-live.ru, с разрешения автора — Ричарда Раттера Использовать вариативные шрифты в реальном мире не так-то легко, как оказалось. Эта статья поясняет, как мы справились с этим на новом сайте Ampersand и что мы узнали за это время. Вариативный шрифт — один файл шрифта, который умеет ...