Font face что это

CSS правило @font-face

Определение и применение

CSS правило @font-face позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов». При работе с правилом @font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.

Обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов, имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт. К примеру, если Вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF.

Поддержка браузерами

Значения правила

Версия CSS

Пример использования

Для добавления шрифта на страницу Вам необходимо:

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

Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.

Еще раз обращаю Ваше внимание, что один файл шрифта содержит:

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

Пример использования правила @font-face(позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов»).

Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):

Еще раз обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов, имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт. К примеру, если Вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF.

Более подробно использование правила @font-face Вы можете изучить из учебника CSS в статье: «Работа со шрифтами в CSS».

Источник

Прекрасные шрифты посредством @font-face

Хотя Firefox 3.0 улучшил отображение шрифтов, привнеся поддержку кернинга, лигатур, различных толщин, а также поддержку отображения сложных начертаний, всё же авторов ограничивало использование в своих дизайнах только общедоступных шрифтов. снимает вводя поддержку это способ прицеплять шрифты TrueType и OpenType точно так же, как нынче прицепляют код и иллюстрации. Браузер Safari поддерживал этот вид гиперсвязи со шрифтом, начиная от версии 3.1, а в Opera объявили, что планируют поддержать его в Opera 10.

Использовать @font-face для гиперсвязи со шрифтом — сравнительно несложно. Внутри стилевого файла каждое свойство задаёт используемое имя шрифтового семейства, и подгружаемый шрифтовой ресурс, и стилевые характеристики заданного начертания — скажем, полужирное ли оно, курсивное ли. Firefox 3.5 скачивает шрифты только по мере нужды, так что стилевой файл может задать полный набор шрифтов, из которых лишь выборочно несколькие станут использоваться в действительности.

Браузеры, поддерживающие @font-face, отобразят текст при помощи Graublau Sans Web, тогда как более старые браузеры отобразят его при помощи либо Lucida Grande, либо начертания по умолчанию Вот пример:

Копнём чуть поглубже

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

Текст примера показан ниже отображённым при помощи этого шрифтового семейства:

Есть особенность, которую нетрудно проглядеть: дозволяет создание семейств с бóльшим количеством начертаний, нежели просто обычное и полужирное — внутри единого семейства можно определить до девяти значений жирности. Это справедливо даже для Windows, где внутренние недостатки платформы обыкновенно ограничивают шрифтовые семейства только обычным и полужирным значением жирности. Существующие шрифты, подобные японскому проекту (с открытым исходным кодом), обладают аж семью жирностями. В качестве примера приведём выборку их:

В некоторых обстоятельствах авторы могут предпочесть использование шрифтов, доступных читателю локально, а скачивать шрифты только тогда, когда соответствующие начертания недоступны. Это возможно, если использовать «local()» при задании дескриптора «src» во правиле Браузер последовательно станет пробовать элементы списка шрифтов из дескриптора «src», покуда успешно не закачает желаемый шрифт.

Вот скриншот, показывающий сверху вниз итоги отображения в Mac OS X, Windows и Linux простого примера, использующего определённое выше шрифтовое семейство:

Шрифтовое семейство Helvetica Neue имеется в большинстве систем Mac OS X, однако обычно отсутствует на машинах Windows и Linux. Когда тутошний пример отображается на Mac OS X, используются локальные начертания Helvetica Neue, и никакой шрифт не скачивается. Под Windows и Linux попытка загрузить локальный шрифт терпит неудачу, и подстановочный шрифт (MgOpen Moderna) скачивается и используется вместо того. MgOpen Moderna планировался как замена Гельветике, так что отображается он похожим на Helvetica Neue. Таким способом автор может обеспечить желаемый облик текста, но избежать скачивания шрифта, когда в том нет нужды.

Имя, используемое для отсылки к конкретному начертанию шрифта — это полное имя отдельного шрифта. Обыкновенно это имя семейства плюс название стиля (например, «Helvetica Bold»). В Mac OS X имя показывается на информационной панели для указанного начертания. Выделите одно начертание и выберите «Show Font Info» из меню «Preview» в FontBook:

Подобные инструменты существуют и под Linux. Под Windows используйте расширение свойств шрифта, свободно скачиваемое от Microsoft средство просмотра этих имён. Когда расширение установлено, панель свойств показывает сведения об отдельном шрифте. Полное имя указывается как «Font Name» на вкладке «Name»:

Safari под Mac Os X поддерживает поиск только по именам PostScript, так что имена Postscript под Mac OS X также поддерживаются. Для шрифтов OpenType PS (обыкновенно помечаемых полное имя совпадает с постскриптовым именем под Windows. Так что для этих шрифтов авторам рекомендуется указывать как полное имя, так и постскриптовое, и тем достигнуть кросс-платформенной работоспособности.

Поддержка многих языков

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

Языкам, подобным арабскому, требуется такое изменение формы текста, при котором на отображение заданного символа влияют символы, его окружающие. Различные платформы используют различные технологии отрисовки, чтобы сделать изменение формы текста возможным; под Mac OS X необходимы шрифты AAT, в то время как под Windows и Linux необходимы шрифты OpenType. При отсутствии шрифта в формате, необходимом данной платформе, изменение формы текста не окажется отображённым правильно.

Под Mac OS X скачивается шрифта. На Windows и Linux, где отрисовка не поддерживается, скачивание пропускается, и шрифт OpenType используется вместо него. Стало быть, текст отображается правильно на всех платформах.

Междусайтовое использование шрифта

По умолчанию Firefox 3.5 дозволяет шрифтам скачиваться только для страниц, полученных с того же сайта. Это предотвращает свободное и бесплатное использование сайтами шрифтов, обнаруженных на других сайтах. Для тех сайтов, которые явственно желают дозволить междусайтовое расшаривание шрифтов (например, для онлайновой библиотеки шрифтов), Firefox 3.5 поддерживает употребление заголовков контроля доступа, управляющих таким поведением. Добавляя дополнительный заголовок к заголовкам HTTP, посылаемым со шрифтовыми файлами, сайты могут сделать междусайтовое использование возможным.

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

Проблемы лицензирования шрифта

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

«Я нашёл бесплатный шрифт, можно ли использовать его на моём сайте?»

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

«Я просто хочу использовать [здесь вставьте название любимого шрифта] на моём сайте. Это возможно?»

Прямо сейчас, скорее всего, нет. Использование прицепленных шрифтов в Паутине едва народилося. Бóльшая часть шрифтов, нынче идущих с собственническими операционными системами, имеют лицензии, ограничивающие их употребление стандартными десктопными приложениями, так что накачивание этих шрифтов на вебосервер, почти наверняка, не дозволяется. В прошлом шрифтопроизводство немало бедствовало от пиратства, так что большинство шрифтопроизводителей насторожённо относятся к дозволению использовать их шрифты за пределами сравнительно ограниченных контекстов. Многие поставщики шрифтов сосредоточилися на нуждах печатной промышленности, что нередко отражается и на сравнительной сложности их лицензий. В будущем некоторые дизайнеры шрифтов могут прийти к умозаключению, что продажи шрифтов в качестве шрифтов Паутины превзойдут любой потенциальный ущерб продажам от пиратства, а другие могут и не прийти к такому умозаключению. Лицензионные соглашения их отразят выбор их, и к ним следует отнестись с уважением.

Рынок продаж фотографии нередко называют двухбиллионным, а рынок шрифтов Паутины ещё близок к нулю, так что он может только возрастать!

Прицепление шрифтов в Internet Explorer

Прицепление шрифтов давно возможно в Internet Explorer, но только шрифтов в собственническом формате шрифта EOT. Есть единственный способ создания воспользоваться майкрософтовским инструментом WEFT, доступным только на Windows. Только шрифты TrueType и OpenType TT могут быть преобразованы в формат EOT, а шрифты использоваться не могут.

Во правилах @font-face браузер Internet Explorer воспринимает только дескрипторы и src, так что каждое семейство может содержать только одно начертание. Он не понимает указания format() и проигнорирует любое правило содержащее такие указания. Это поведение можно использовать, чтобы задействовать прицепление шрифта

Грядущая работа

В Firefox 3.5 дескрипторы font-stretch и unicode-range не поддерживаются. Шрифты, определённые в документах SVG, также ещё не поддерживаются. Рассматривается внедрение их в будущих выпусках Файерфокса. Как всегда, патчи приветствуются!

Источник

Что такое @font-face на самом деле

После увиденного мной в коде коллег неадекватного применения font-face:

я понял, что что-то не так в датском королевстве. Скорее всего в одной статье всего не объять, но давайте просто начнём.

Допустим, собрались вы в 2021 году подключить шрифт. Начитавшись про то, как же всё плохо (на самом деле, нет) с сервисом Google Fonts, решили подключать локально. Приобрели (естественно) пакет шрифтов, распаковали и увидели следующее:

Зрелище не для слабонервных, понятное дело. Сразу же возникает вопрос, как с этим быть (конвертацию и лицензирование оставим на потом). А ответ на него – @font-face.

При работе со шрифтами в CSS выделяют несколько понятий: семейство (font-family), насыщенность (начертание, font-weight), стиль (font-style), плотность (растяжение, font-stretch), вариант (font-variant) и кегль (размер, font-size).

Важно понимать: @font-face это не подключение файла шрифта буквально, а описание конкретного набора всех вышеупомянутых свойств для загруженного файла, до которого можно достучаться через обращение к ним же в правилах CSS нужных элементов.

Итак, давайте начнём с указания стиля, здесь вариантов три: normal, italic и oblique. Между italic и oblique разницу не все понимают и далеко не всегда их вообще разделяют. Если коротко, italic – это не только наклон, но и изменение внешнего вида шрифта, вплоть до лигатур (объединения символов), а oblique – те же символы, но под наклоном. И то и то в русском языке чаще всего называют курсивом.

Выходит, в реальной жизни нам остаются два: normal и italic. Если вы видите в названии шрифта слово Italic или аббревиатуру It – это «курсив», italic (MyriadPro-BoldSemiCnIt.otf, MyriadPro-It.otf). Oblique же задаётся аббревиатурой Ob (Obl), но вряд ли вы это где-то увидите.

Дальше идёт начертание. В CSS принято использовать числовые значения от 100 до 900 по степени увеличения насыщенности или же текстовые: normal (400), bold (700). Существуют ещё bolder и lighter, но они работают от наследуемого свойства и использовать их в @font-face не стоит!

В названиях шрифтов это обычно выражается так: Light (100, MyriadPro-Light.otf), Book (300), Regular (400, MyriadPro-Regular.otf), Medium (500), Semibold (600), Bold (700, MyriadPro-Bold.otf), Black (Solid, 900, MyriadPro-BlackCond.otf). Зачастую Black является отдельным семейством, но тут кому как. Естественно, истинные названия и соответствия остаются на усмотрение разработчика шрифта.

Следующее – font-stretch, плотность шрифта. Его широкость-узкость, если хотите. И здесь-то настоящее раздолье: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded (от наиболее узкого к наиболее широкому).

Как вы уже могли догадаться, действует то же правило аббревиатур: Cond, Cn – condensed (узкий, MyriadPro-Cond.otf, MyriadPro-LightCond.otf), SemiCond, SemiCn – semi-condensed (полусжатый, MyriadPro-SemiCn.otf), SemiExt – semi-extended (полуширокий, MyriadPro-SemiExtIt.otf) и так далее.

Остаётся font-variant, но у него всего два варианта: normal и small-caps (когда строчные буквы выглядят как уменьшенные прописные). Здесь с аббревиатурой не угадаешь, предлагайте ваши варианты в комментариях.

Давайте разберём пример подключения. Определим базовый шрифт для двух видов контейнеров (woff2 и opentype/otf):

И какие-нибудь наиболее вычурные варианты:

Как видим, ничего сложного. Семейство всегда одно! Это можно применять как угодно, хоть объединить несколько разных шрифтов в группу «MyBestSiteDuckingFontEver».

К первому классу применится файл MyriadPro-BlackSemiExtIt.woff2 (или otf, в зависимости от поддержки), а ко второму – MyriadPro-BlackSemiCn.woff2. Если не будет ни того, ни другого, то сбросится до MyriadPro-Regular.woff2. Здесь нужно быть внимательным: браузеры любят издеваться над шрифтами и пытаться сделать их жирнее или наклоннее, чем они есть. Особенно славится этим Chrome.

Если и Regular-файл не будет найден, то используется системный sans-serif шрифт, о порядке выбора локальных шрифтов стоит написать отдельный материал.

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

Источник

Правило @font-face

Каждый веб-дизайнер мечтает о создании сайта с красивой типографикой. Но к сожалению, браузеры поддерживают лишь несколько гарнитур, так называемых «безопасных для веб» шрифтов. В стандартный набор входят следующие шрифты: Arial, Verdana, Times, Georgia, Courier New и несколько других.

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

Шрифт — это набор символов конкретного размера, веса и стиля. Например, шрифт Times New Roman стиль italic размера 16px — это один шрифт, а Times New Roman стиль italic размера 10px — это уже другой.

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

Этот код говорит браузеру отображать текст внутри элемента

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

В общем виде для шрифта можно задать следующие свойства:

Если вы предполагаете, что на компьютере пользователя установлен данный шрифт и хотите, чтобы шрифт загружался только после проверки его наличия у пользователя, то можно воспользоваться значением local() для задания адреса:

Форматы веб-шрифтов

Свойство @font-face имеет хорошую поддержку в браузерах, но разные браузеры используют разные форматы шрифтов. Существуют четыре основных формата шрифтов:

Сложности использования встроенных шрифтов

Полезные ресурсы

Font Squirrel — сервис, позволяющий конвертировать веб-шрифты разных форматов. Небольшой минус — высота некоторых символов после конвертации может различаться. Шрифт загружается на сервис по кнопке Upload Fonts.

Webfont.ru — ресурс, содержащий коллекцию бесплатных шрифтов для сайтов. На сайте также есть форум, где можно задавать вопросы, касающиеся использования того или иного шрифта. В закладке «Полигон» вы сможете увидеть, как будет выглядеть текст, поиграв с размерами, задав для него тень и т.д.

Transfonter — быстрый и удобный генератор правила @font-face для веб-шрифтов.

Источник

Как подключить и оптимизировать нестандартные шрифты

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

Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.

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

Для начала стоит выбрать правильный формат шрифта. TTF и OTF — форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров. Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 — усовершенствованная версия предшественника, этот формат можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF.

Подключение шрифтов с помощью Google Fonts

Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.

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

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

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

Подключение шрифтов с помощью правила @font-face

Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.

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

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

Базовый вариант правила:

Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.

Оптимизация

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

FOIT, FOUT и FOFT

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

FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.

FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.

FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.

Свойство font-display

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

Предзагрузка шрифтов

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

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

Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :

Уменьшение количества глифов шрифта

По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.

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

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

Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:

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

Полезности

Подключение шрифтов — часть вёрстки

А научиться вёрстке проще, чем кажется. Скидка 1000₽ по промокоду SKUCHNO.

Источник