Нестандартные шрифты: как подключить и оптимизировать
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.
Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.
Выбираем формат шрифта
Все слышали про TTF и OTF. Но это форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров.
Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 вообще можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF .
Подключение шрифтов с помощью Google Fonts
Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в <head> ссылку, которую сгенерирует Google Fonts во вкладке Embed.
Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.
Стоит отметить, что после основного шрифта важно указать веб-безопасный. В случае, если нестандартный шрифт не загрузится, браузер воспользуется альтернативным. Его нужно подобрать максимально похожим на основной шрифт.
Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.
Подключение шрифтов с помощью правила @font-face
Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2, о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.
После того, как шрифты добавлены в проект, их нужно подключить в CSS-файле. Для этого используется правило @font-face . В самом базовом варианте оно будет включать:
Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .
Базовый вариант правила:
Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.
Оптимизация
Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.
FOIT, FOUT и FOFT
Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.
FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.
FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.
FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.
В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display .
Свойство font-display
У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:
auto — поведение по умолчанию, зависит от браузера.
block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.
Оптимальное значение — swap , его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional .
Предзагрузка шрифтов
Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.
Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.
Для того, чтобы предзагрузка сработала, нужно поместить в <head> ссылку на шрифт и задать атрибуту rel значение preload :
Также необходимо добавить тип ресурса, в данном случае — font . Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.
Уменьшение количества глифов шрифта
По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.
Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.
Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.
Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в <head> при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:
В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.
Полезности
HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.
Подключение веб-шрифтов с помощью @font-face
Выжимка из замечательной книги “Большая книга CSS3 3-е издание” Дэвида Макфарланда о веб-шрифтах и способе их подключения с помощью директивы .
Узнал об этой теме массу нового для себя. В частности, два способа подключения шрифтов, особенность работы с сервисом Google Fonts и числовая шкала плотности шрифтов, ресурсы для поиска бесплатных шрифтов, тонкости работы с генератором FontSquirrel, ресурсы по шрифтовым иконкам. Для меня информация оказалась чрезвычайно полезной и интересной.
Ниже привожу краткий конспект всех вопросов, показавшихся мне интересными и новыми в моей практике, пересказанный своими собственными словами. Надеюсь, данный материал окажется полезным не только для меня одного.
Подключение веб-шрифтов с помощью @font-face:
- подключение нестандартного шрифта с помощью директивы
- назначение подключенного шрифта с помощью свойства
Директива указывает (название говорит само за себя — директива!) браузеру сделать две вещи:
- создать указываемое имя шрифта
- загрузить глифы для шрифта из указанного ею места
Свойство указывает браузеру применить шрифт с указанным именем выбранным элементам страницы.
Существует несколько форматов веб-шрифтов. Наиболее распространенные из них: EOT, WOFF, OTF или TTF,
Формат EOT, который понимают браузеры IE вплоть до версии 8. Собственно, этот формат шрифта создан и существует только ради этого браузера и таких его версий. Чтобы получить шрифт формата EOT, необходимо специальное программное обеспечение для преобразования формата TTF в OET.
Формат WOFF (Web Open Font Format) является наилучшим на сегодняшний день для использования в Веб: самый маленький и легкий, поддерживается всеми современными браузерами (в том числе IE9 и выше); этот формат был создан специально для Веб. Фактически — это облегченная версия формата TTF или OTF.
Форматы OTF (Open Type Font) и TTF (True Type Font) — это самые обычные компьютерные шрифты, которые используются в большинстве операционных систем (Windows, Macintosh, Linux) и в приложениях под эти системы. Но, помимо этого, такие шрифты можно легко использовать и в Интернете.
Формат SVG — это даже не формат шрифта, а формат графики, графического изображения. Особенностью этого формата является то, что графика в этом формате создается исключительно с помощью векторов, то есть — математических формул.
Благодаря этому изображения в таком формате масштабируются без потери качества — при увеличении размера картинки компьютеру достаточно пересчитать векторные точки. Особенность этого формата графики позволила применить его для создания “шрифтов”. То есть, обычный шрифт преобразуется в формат SVG, где каждый шрифт — это фактически картинка в масштабируемом формате SVG.
Зачем потребовались такие трудности? Все дело в том, что браузеры под ОС Android (очень распространенная ОС под мобильные устройства) могут отображать веб-шрифты только в этом формате. Браузеры под iPhone (Safari 4.1 и ниже) также не умеют распознавать веб-шрифт. Вот этим “неумехам” и подсовывают картинки в виде шрифтов — “не умеешь кушать обычную пищу, так кушай хотя бы это!”.
Правовой вопрос использования шрифтов
Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные.
Платные шрифты делятся на те, которые:
- можно использовать в Веб
- нельзя использовать в Веб
Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit, на которых собраны все шрифты, которые можно использовать в Веб. Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).
Краткий список источников бесплатных шрифтов, которые можно использовать в Веб:
- The League of Movable Type (https://www.theleagueofmoveabletype.com/)
- FontSquirrel (http://www.fontsquirrel.com/)
- Google Fonts (https://www.google.com/fonts)
- The Open Font Library (http://openfontlibrary.org/ru)
- Fontex.org (http://fontex.org/)
- Exljbris Font Foundry (http://www.exljbris.com/)
Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator, находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).
Единственное ограничение этого сервиса — он имеет свой собственный blacklist, в который помещены шрифты, запрещенные по лицензии для использования в Веб. Другими словам, если “подсунуть” этому генератору лицензионный шрифт, приобретенный пиратским способом, то он откажется от генерации последнего.
Генератор Generator — не единственный в Веб сервис подобного рода. Существуют подобные ему генераторы, которые, в тому же, обладают “неразборчивостью” по отношению к лицензии конвертируемого шрифта.
Порядок указания форматов шрифтов в директиве важен и должен быть следующим:
- EOT — формат только для Internet Explorer 8 и ниже
- WOFF — самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
- TTF — сравнительно большой по размеру шрифт и достаточно устаревший
- SVG — самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone)
Браузер читает тело директивы — каждую строку последовательно. Как только он обнаруживает понятный для него формат шрифта, то загружает его. Поэтому последовательность объявления форматов шрифтов в директиве является неслучайной и эмпирически выверенной на основе опыта предыдущих веб-разработчиков.
Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем — резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).
Внимательный читатель обратит внимание на вторую строку и скажет: это здесь лишнее, бред какой-то. На самом деле не совсем так. Браузеры всегда пытаются отрисовать заголовки полужирным начертанием, по умолчанию. Поэтому, здесь мы говорим, чтобы браузер просто этого не делал, и все.
Помимо букв, шрифты могут состоять из иконок или изображений. Ресурсы, посвященные теме шрифтовых иконок и значков:
Виды шрифтов
При подключении шрифтов, установленных на компьютере, обычно не возникает вопросов и мы не задумываемся о том, как так получается, что при указании браузеру отрисовать текст полужирным с помощью тега у нас действительно получается полужирный шрифт; при указании сделать текст курсивным через тег текст действительно делается курсивным; а при полужирном курсиве через теги он делается полужирным курсивом. Нам кажется, что браузер делает текст таким, каким мы указываем ему.
На самом деле это не так. Или не совсем так. Браузер действительно отрисовывает шрифт указанным ему способом, но вот с самим шрифтом он ничего сделать не может. Он просто берет указанное тегом начертание шрифта и выводит его на экран. Дело в том, что дизайнеры или компании, занимающиеся разработкой шрифтов, создают шрифты таким образом: художник рисует четыре набора одного и того же шрифта. То есть, рисуется набор символов в обычном начертании (regular), затем рисуется набор символов в курсивном начертании (italic), потом набор символов в полужирном начертании (bold), и наконец набор символов в полужирном курсивном начертании (bold italic). Все эти четыре набора символов фактически являются отдельными шрифтами, хотя и носят одно общее название (Georgia, Tahoma, Helvetica и так далее).
Когда браузеру указывается, какое начертание применить, он просто берет шрифт с указанным начертанием и отображает его. К примеру, шрифт Arial имеет четыре вида начертания. Если указывается, что нужно полужирное начертание, то браузер берет полужирное начертание Arial. Сам браузер преобразовать одно начертание в другое не может ни в коей мере. Он может выполнить только одну вещь — попытаться сделать и обычного начертания “курсивное”. Команда, говорящая браузеру выполнить такую задачу, имеет название . В этом случае браузер просто тупо выполняет наклон всех букв шрифта на 45 градусов, и все. Получившийся результат может быть просто ужасным, поэтому такая команда используется очень редко.
В случае с веб-шрифтами веб-дизайнеру нужно самому побеспокоиться от том, чтобы подключить все четыре вида начертания выбранного шрифта по отдельности. Из-за браузера IE8 подключение веб-шрифтов с помощью директивы значительно осложняется и может быть выполнено двумя способами: простым, который IE8 не понимает (но понимают все остальные браузеры) и сложным, который будет доступен и IE8 также.
Простой способ подключения веб-шрифта
Простой способ заключает в добавлении к директиве двух CSS-правил: и . Обычно эти два правила задают браузеру команды отображать текст полужирным и курсивным начертанием. Но внутри директивы эти правила выполняют другую роль, они заставляют браузер загрузить веб-шрифт с указанным стилем и жирностью. Чтобы быть более понятным, приведем сразу пример подключения веб-шрифта PTSans с четырьмя вариантами его отображения:
Расскажу, как я понимаю данные CSS-правила. Директива является своего рода функцией наподобие функции в JavaScript (а может это и есть функция на самом деле, уж больно похожа по своему функционалу?). Эта функция (я буду называть так здесь эту директиву) объявляет имя переменной правилом . Эта переменная является массивом, который заполняется значениями с помощью последующих правил:
- — местоположение шрифта;
- — загрузить шрифт указанной жирности;
- — загрузить шрифт указанного стиля.
CSS-правила требуют, чтобы при четырех вариантах отображения шрифта заполнение массива производилось каждый раз отдельным вызовом функции . После этого достаточно подключить переменную к выбранным элементам страницы:
И затем HTML-тегами или указать, какое начертание шрифта применить к указанным элементам:
Браузер “вытащит” из массива PTSans шрифт нужного начертания (bold или italic или bold italic) и применит его к указанным элементам страницы.
Преимуществом данного способа подключения веб-шрифта является его универсальность. Достаточно один раз объявить шрифт с помощью директивы и правила:
… чтобы потом управлять отображением этого шрифта посредством семантически верных тегов и .
Сложный способ подключения веб-шрифта
К сожалению, IE8 не понимает способа подключения веб-шрифта, описанного выше. Точнее, этот браузер не понимает способа подключения различных начертаний шрифта к одному и тому же имени этого шрифта. Если создать правила, описанные выше и попробовать загрузить полученную HTML-страницу в IE8, то весь текст будет отображен как: .
В тех местах, где применены теги или , браузер IE8 будет сам делать из шрифта PTSans начертания и , а не подключать уже готовые шрифты в этих начертаниях. Результат такой “самодеятельности” будет плачевным.
Выходом из положения будет применение различных имен шрифта в директиве . Пример варианта подключения веб-шрифта, понятного для IE8, показан ниже:
Обратите внимание на отсутствие правил и во всех четырех директивах . Такой код выглядит даже более понятным и логичным, нежели первый вариант. И вроде бы все хорошо, но задавайте теперь рассмотрим простой пример параграфа с тегами и , к которому следует применить шрифт PTSans.
Оцените этого CSS -“крокодила” ниже. Какой он громоздкий и неуклюжий! А если учесть, что на HTML-странице нужно будет применить шрифт PTSans не только к элементу p, а еще к заголовкам , , ссылке ? Насколько же “раздуются” таблицы стилей в этом случае! А если вдруг (не дай Бог!) придется вносить изменения в такой код?
Применять или не применять второй способ подключения веб-шрифтов — это вопрос того, насколько необходима поддержка IE8 для конкретного сайта. Следует учесть, что доля IE8 падает и будет продолжать падать.
Шрифты Google Fonts
Чтобы не заморачиваться с поиском шрифта, скачиванием его в формате TTF или OTF, конвертации на генераторе типа FontSquirrel Generator, подключения полученных CSS-стилей в проект с помощью многочисленных директив , можно воспользоваться сервисом Google Fonts. Преимущество этого способа заключается в простоте способа и его надежности — достаточно получить на сервере Google одну строку ссылки и поместить ее в свой проект.
Примечательный момент использования шрифтов Google — это способ подключения полученных шрифтов. Первый способ — с помощью тега , второй в помощью директивы , третий с помощью скрипта JavaScript.
Первый способ прост, но имеет один недостаток — тег нужно будет подключать к каждой из разрабатываемых HTML-страниц проекта.
В тоже время, второй способ с помощью директивы более лаконичный — достаточно подключить ее в начало таблиц стилей, чтобы выбранные шрифты применялись ко всем HTML-страницам.
Третий способ с помощью JavaScript кроме сложности, никаких других преимуществ перед двумя другими не имеет.
В Google плотность шрифта обозначается не с помощью ключевых слов , или , а в числовой шкале — 100 до 900. Значение 400 соответствует , 700 — .
К примеру, код может выглядеть следующим образом. Зададим для элемента шрифт Gentium Book Basic нормальной плотности курсивного начертания:
На этом выжимка по веб-шрифтам заканчивается.
Красивая функция trackBy
Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:<% highlight typescript %>public trackByNumber = (_. … Continue reading
Термины
Для полного понимания статьи я приведу ряд наиболее трудных понятий.
Гарнитура — начертание шрифта т.е. его рисунок. Гарнитурой является весь диапазон начертаний шрифта «Helvetica». Чаще всего говорят шрифт подразумевая гарнитуру.
Глиф — один рисунок символа.
FOIT (Flash of Invisible Text) — букв. «мелькание невидимого текста», когда во время загрузки веб-шрифта текст не отображается вообще.
FOUT (Flash of Unstyled Text) — букв. «мелькание не оформленного текста», когда во время загрузки веб-шрифта текст отображается шрифтом по умолчанию (напр. системным).
FOFT (Flash of Faux Text) — букв. «мелькание синтезированного текста», когда в промежутке между загрузкой основного веб-шрифта и его вариаций (жирный, курсив и т.д.) вместо этих вариаций браузер отображает особым образом измененный основной шрифт (так называемый «ложный жирный» и «ложный курсив», чуть подробнее о них здесь).
Для того что-бы визуально понять различия FOUT и FOIT рекомендую перейдите по ссылке на демо-страницу.
Введение
Настало время, когда можно подключать на страницу любой шрифт, задуманный дизайнером . В связи с этим появились новые проблемы: долгая загрузка, сильно влияющая на скорость страницы, FOIT, FOUT, FOFT. В этой статье я рассмотрю методы подключения шрифта, их плюсы и минусы, а так же способы оптимизации текста на странице. Я посмотрел очень много материала по данной теме включая спецификацию CSS, на сегодняшний день все стало намного проще.
Основная часть информации была взята у человека, который посвятил изучению этого вопроса много времени Zach Leatherman, он ведет свой блог и делится полезной информацией.
Я считаю устаревшей легендарную статью Bulletproof @font-face Syntax, которая применяется сейчас повсеместно , она с избытком поддерживает все устаревшие браузеры.
Я за прогрессивный подход и придерживаюсь мнения, что нужно пользоваться 2-мя форматами шрифтов, которых хватит на долгое время, это WOFF2, WOFF, разработанные компанией Mozill. Также, по моему мнению, следует исключить все остальные расширения за ненадобностью. Сейчас эти форматы поддерживаются всеми современными браузерами и они отлично справляются со своей задачей.
Почему именно эти 2 формата? Они имеют маленький вес и поддерживают параметры шрифта, используемые в свойстве font-feauter-settings , о которой мы поговорим чуть позже.
- svg — формат самый объемный из всех, в 2–3 раза тяжелее остальных форматов и поддерживается только старыми safari.
- eot — формат поддерживается только старыми IE и также много весят.
- ttf — устаревший формат относительно много весит и зависит от OC.
- woff — формат разработанный компанией Mozilla, имеет меньший вес, но также поддерживает настройки.
- woff2 — аналогичен формату woff, но легче примерно на 30%.
Варианты подключения шрифта
- В HTML через тег <link>
- В CSS через директиву @import
- В CSS через директиву @font-face
- В CSS через base64 — как правило оно весит больше чем файл со шрифтом. Не рекомендую использовать, если конечно не горит.
Тег <link>
Очень популярный метод подключения шрифта благодаря сервису от googleGoogle Font.
- Возможно данный шрифт будет в кеше пользователя
- CDN от google
- Быстрая загрузка до CSS
- Загружается в любом случае, даже если не используется на странице
- Создает дополнительные подключения к другим ресурсам
- Не использует свойство font-display , которое между прочем требуют Page speed и lighthous.
Подключение через директиву @import
Мало используемый способ подключения шрифта за счет медленной работы данной директивы. Избегайте его использования, даже при подключении других css файлов.
Подключение шрифта через директиву import заставляет шрифт ждать пока загрузится файл в котором он подключен:
How To Load and Use Custom Fonts with CSS
The visual identity of a website is largely dictated by two principles of design: color and typeface. In the last decade, there have been great strides in providing custom fonts to users with more preloaded fonts on devices, the ability to load custom fonts with the @font-face rule, and the use of font hosting services. Web browsers have also implemented support for variable fonts, which are single font files from which multiple fonts can be interpolated, providing a high-degree of tuning and font customization.
In this tutorial, you will try out examples of loading fonts onto your website. You will use the font stack, a rank ordering of fonts based on availability, to use fonts that may be installed on the user’s device. Then, you will use a font-hosting service, Google Fonts, to find, select, and load custom fonts onto your page. Lastly, you will load a self-hosted font family using the @font-face rule, followed by a self-hosted variable font.
Prerequisites
- An understanding of CSS’s cascade and specificity features, which you can get by reading How To Apply CSS Styles to HTML with Cascade and Specificity.
- Knowledge of type selectors, combinator selectors, and selector groups, which you can find in How To Select HTML Elements to Style with CSS.
- An understanding of font stacks and font properties in CSS, which you can find in the tutorial How To Style Text Elements with Font, Size, and Color in CSS.
- An empty HTML file saved on your local machine as index.html that you can access from your text editor and web browser of choice. To get started, check out our How To Set Up Your HTML Project tutorial, and follow How To Use and Understand HTML Elements for instructions on how to view your HTML in your browser. If you’re new to HTML, try out the whole How To Build a Website with HTML series.
Setting Up the HTML and Creating the Initial Font Stack
The concept of a font stack comes from early in the web, when there were only a few trustworthy fonts that one could installed on the majority of computers. It was often likely the font would not be available, so the font stack provided an order of fonts that the browser could attempt to find and load. In this section, you will learn the principles of a resilient font stack and what options are available for fonts on modern devices. But first, you will create example HTML to demonstrate the fonts.
Begin by opening index.html in your text editor. Then, add the following HTML to the file:
Inside the <head> tag, the first <meta> tag defines the character set for the HTML file. The second <meta> tag defines how mobile devices should render the page. Next, the <title> tag gives the page its title. Finally, the <link> tag references the CSS file you will use later to create the styles for the page.
Next, inside the <body> tag, add the content of the page. This content is known as filler content from Cupcake Ipsum and it provides text to appear like content without actually saying anything. The filler content is highlighted in the following code block. You will encounter this highlighting method throughout the tutorial as code is added and changed:
The filler content contains a number of elements that are used to provide different font styles. The <strong> tag will by default make its content bold, the <em> tag will italicize its content, and the heading tags will increase the font size and bold their content.
Next, return to your text editor and create the styles.css file in the same folder as index.html . This is the file that you referenced in the <head> element of index.html . In the styles.css file, add the following code:
These styles create the overall visual style of the page. The header has a purple background with the h1 and p inside being a light purple. The main and .content-width selectors create the layout of the page, and the body and heading selectors provide several typographic styles by setting the line-height , color , and margin values.
Save your changes to styles.css , then open your web browser. Open index.html in the browser by dragging the file into the browser window, or using the browser’s Open File option. The browser will render the HTML and CSS code to produce a page like the following image:
The text of the index.html file in your browser will be using the browser’s local default font. In most cases, this will be a serif font like Times New Roman. The most performant way to customize fonts is to use fonts already on the end user’s computer. Using local fonts relieves the browser of downloading and processing sizable files.
Today, there are often several dozen local fonts to choose from; these are known as system fonts. Both Microsoft and Apple keep an updated list of the fonts that come with their systems.
To begin using pre-installed system fonts, return to styles.css in your text editor. In the body selector, add a font-family property, and make its value a comma-separated list of fonts known as a font stack:
The browser will sequentially attempt to load the local fonts in the font stack until it is successful. For this font stack, the first font to attempt is "PT Sans" , which is in quotes because it is a multi-word font name. PT Sans is a font from ParaType that comes pre-installed on Apple operating systems and is also available for free from Google Fonts. The next font is Calibri , followed by another comma and Tahoma . Calibri is a font from Microsoft that comes installed on recent version of Windows, and Tahoma is another font from Microsoft that has been present on Apple operating systems for over a decade.
The final font is the generic name-spaced value sans-serif . If none of the previous three fonts are available, then the browser will use the browser’s default sans-serif font, such as Helvetica or Arial.
Save your changes to styles.css and then refresh index.html in your browser. Your operating system and installed fonts will determine which font is rendered and how it is rendered. The following image shows how PT Sans appears as the font when loaded in Firefox on macOS:
A font family consists of all the weight and style variations of a given font. Families can include many additional weight and styles that change how thin, thick, and slanted a font will display.
The font-style property determines the slant of the font. The value is most commonly italic ; however, some fonts support the oblique value, which accepts an optional degree value to indicate the steepness of the slant.
The font-weight property has two defined named values of normal and bold , but the most versatile and predictable manner to determine this value is to use a weight number. The weight number values are commonly defined in increments of 100 from 100 to 900, with 100 being a thin weight and 900 being a thick weight. If the browser cannot find a font corresponding to the specified weight, it will find the closest available size.
To set some new base font styling for this page throughout the tutorial, return to styles.css in your text editor. Then create an element selector for each of the h1 , h2 , h3 , and p elements. Inside each selector, add the highlighted CSS from the following code block to increase the font size and emphasize the headings:
The h1 here is set to a font-size of 3rem , which is equivalent to 48px , with a thin font-weight of 100 . Then, the h2 is set to 2rem , equivalent to 32px , and a font-weight of 200 . Next, the h3 is set to the same font-weight and a slightly smaller font-size as the h2 , but gains an added font-style property set to italic . Lastly, the p element selector bumps up the standard font-size to 1.125rem , which is equal to 18px in this case. The adjustments to the overall styling of this text will remain the same as you change the font used in each section.
Save the changes to styles.css , then return to your browser and refresh index.html . The overall text size has bumped up, with the heading styles gaining more distinction from one another. The following image shows how this will appear in the browser:
In this section, you used the font stack to load a series of possible fonts on the page in a ranked order. You also learned about the possible variations of a font family with the font-weight and font-style properties. In the next section, you will use a font from a font hosting service.
Finding and Loading a Font File from a Hosted Service
Hosted font services are a popular and effective way of finding and providing custom fonts to a websites. Services such as Google Fonts, Adobe Fonts (formerly Typekit), and Typography.com provide a large library of high-quality fonts that a client will temporarily download when viewing your page. This means that you no longer have to worry about which fonts are on the client’s system.
Each font hosting service has its own process for loading fonts, and in many cases there is an associated cost. For this section, you will find and load fonts from Google’s service, as it hosts open-source and limited license fonts free of charge.
To begin, open fonts.google.com . Search for the font named “Open Sans” using the search bar at the top of the page. The search results will list the matching term, which is a link taking you to the Google Fonts Open Sans page. On this page, there is a list of several font styles. Each one of these font weight and style combinations is a unique font file that the browser will download.
Note: Each font-weight and font-style will need to be selected based on need, instead of selecting them all. More fonts selected means more fonts need to be downloaded, thus increasing the website load time. It is important to only load the font weights and styles that are used in your design.
For this design, select Light 300, Light 300 italic, Regular 400, Regular 400 italic, Bold 700, and Bold 700 italic. The following image displays how this selection will look in Google Fonts:
Next, copy the <link> tags necessary to load the files from the Google Fonts service. To do that, select the <link> option instead of the @import option as the way to load the files in the Google Fonts interface. Copy the series of <link> tags presented. Then, return to index.html in your text editor. Go inside the <head> element and, after the <link> tag loading styles.css , paste the <link> tags from Google Fonts. The highlighted HTML in the following code block demonstrates where to add the copied code:
The first two <link> elements perform a task called a preconnect, which tells the browser to prioritize an external web connection. In turn, these two <link> elements prepare the browser to load the CSS file and font files from the third <link> as soon as possible.
Now that the font is ready for the browser to load it on to the page, next you need to apply the font styling so the text is rendered with that font.
Save your changes to index.html , then return to styles.css in your text editor. In your body selector, go to the font-family property. Prepend the value with the font name "Open Sans" in quotes before the "PT Sans" font, followed by a comma. The highlighted CSS in the following code block shows where the new font is placed in the font stack:
By adding Open Sans to the beginning of the font stack, the browser will fallback to the next available local font if the browser is unable to load the files from Google. It is important to always have a font stack of at least two, with the last font in the stack being sans-serif , serif , monospace , or another named value that most effectively resembles the intended font.
Save your changes to styles.css and open index.html in the web browser. The text on the page will now render using the Open Sans font loaded from Google Fonts. The text with a font-weight set to 100 and 200 will instead use 300 since that is the closest available. The following image illustrates how this will appear in the browser:
In this section, you loaded a font family from Google Fonts. You learned how each font weight and style is a different file loaded from the service, and that the number of loaded variations can impact site performance. In the next section, you will load the fonts by writing your own @font-face rule to populate self-hosted font files.
Loading a Self-Hosted Font with @font-face
Self-hosted fonts are font files that are stored on your server alongside the other web components, such as HTML and CSS files. A common reason to consider self-hosting your font files is when you want to use a font that is not provided by a hosting service. When self-hosting, there is more control over how the fonts relate to one another and what they are named, which you can set via the definitions of the @font-face rules. In this section, you will write your own @font-face rules and load a family of fonts onto your web page.
For this section, you will need to download the example zip file containing open-source fonts. You can download this through your browser or use the following curl command:
Once you have downloaded the file, extract the fonts directory contained in the zip file and place it in the same directory as the index.html and styles.css file on your computer. On Linux, you can do this from the command line with the following unzip command:
Next, open up index.html in your text editor. Since you will be loading a local font from the zip file, you can remove the Google Font code. In this section, you will be loading the font files from your existing styles.css file. Make sure the contents of your <head> element are set up like the following code block:
Save your edits to index.html , then open styles.css in your text editor.
You can use the @font-face rule to load a custom font on a web page. The history of loading custom fonts has lead to a compound method to support the widest number of browsers. Unlike other at-rules, like @media or @supports , the @font-face rule has no additional arguments. Inside the rule block, only a set number of properties are accepted. The most important is font-family , which describes the name the browser will use to reference and load the appropriate font files. Then, the src property references the location of the font files. In order to support versions of Internet Explorer prior to version 9, two src properties are necessary, with the first only referencing the .eot font file format. The second src property will then be a comma separated list of font file formats. The browser version will select the appropriate format that it supports.
To begin using the @font-face rule, open styles.css in your text editor. At the top of the file, before the body selector, create the following @font-face rule:
Inside this rule, you’ve added a font-family property with a value of "Fira Sans" in quotes. Since this code is defining an overall font-family , only one font name should be used. The comma separated list of font formats for src is two parted. The first is the url() that, like a background-image property, provides the path to the file format on the server. Then, the format() explains what type of file is being referenced, allowing the browser to select the supported format.
The fira folder inside the fonts folder contains four folders with specific file formats of the Fira Sans font. EOT stands for Encapsulated OpenType, a format Microsoft developed for Internet Explorer to load custom fonts. TTF stands for TrueType Font, and is an older font format that wasn’t originally developed for the web. The WOFF and WOFF2 formats stand for Web Open Font Format, with the “2” signifying the second version of the format. The majority of modern browsers support TTF, WOFF, and WOFF2 equally. To create an @font-face rule that covers the most possible browser formats, you provided multiple sources for your font. The EOT is referenced in both src properties because version 9 and later of Internet Explorer use the comma-separated format instead.
Now that you have the @font-face rule for Fira Sans created, go to the font-family property in the body selector. In the value for the font-family , replace "Open Sans" with "Fira Sans" to use the self-hosted font on your page. The highlighted portion of the following code block demonstrates this change:
Even though the fonts are being loaded from the same place as the styles.css and index.html file, it is important to keep a font-stack of alternates. There are numerous unknown reasons a self-hosted font may not load, and if the browser runs into an issue, a sufficient backup helps to maintain a similar aesthetic for your site.
Save your changes to styles.css and open index.html in a web browser. Notice that the bold and italics versions of the font do not look quite right. This is because in the @font-face rule only the regular font weight and style files were loaded and used. When the browser needs to apply a bold weight or italic style to a font, but lacks the appropriate font file, the browser creates the needed variation. This altered form of a font is known as a faux bold and faux italic. Faux bold is created by adding a stroke to the font, which often creates a wider spacing between characters that could interfere with your intended layout. Faux italic is created by slanting the font, which often does not use space as well as a true italic would.
The following image shows how the faux bold, italic, and bold italic styles appear in the browser:
In order to provide the browser with the appropriate variations of a font family, more details need to be provided in the @font-face rule, and you need to create more rules to load additional variation files.
Return to styles.css in your text editor. In the @font-face rule, add a font-weight and a font-style property after the second src property:
Here you set the value for both properties to normal . For the font-weight , the normal value is equivalent to the 400 numerical weight value. These properties tell the browser to apply these font files for normal variations. Thus the FiraSans-Regular font file will be used when the text needs to be a normal weight and style.
Next, to provide the variations needed to correct the faux bold and faux italic, add more @font-face rules to reference each font-weight and font-style combination:
As more variations are added, it is helpful to add comments to more easily identify the group of font weights. You therefore added a CSS comment above the first @font-face rule. Then, below the first rule, you created three more @font-face rules for the italic, bold, and bold italic variations of the font.
Save these updates to your styles.css file, then refresh index.html in the browser. Your browser is now loading all the variations of the font family provided. The following image showcases the differences between the faux and true versions of bold, italic, and bold italic:
The true bold is much thicker than the browser’s faux bold, and the text is closer together, accounting for the thicker font strokes. The true italic is more notable when comparing the lowercase a character in the word “Italic.” The font changes the style of the a character when italic. Additionally, the slant of the true italic is a lesser degree than the browser’s faux italic.
Next, there are a few more font variations to load, since the heading elements use thinner weight versions of Fira Sans.
Return to styles.css in your text editor and create four more @font-face rules above the regular version @font-face rule:
These new rules load the Thin and the Light variations of Fira Sans, mapped to the 100 and 200 font-weight values, respectively. Since there are not word values for these sizes, you changed the values for the regular and bold font-weight properties to their numerical values.
Save these changes to styles.css , then return to your browser and refresh index.html . The heading elements are now using the thinner variants of Fira Sans, as shown in the following image:
In this section, you loaded self-hosted font files with @font-face rules. You learned how faux bold and italic can impact the visual presentation of a font and how to link many font files together with a common font-family value. In the last section, you will use a variable font, which allows for many variations sourced from a single font file.
Working with Variable Fonts
Variable fonts are a relatively new addition to the options of web typography. Where in the previous section each font weight and style had to be loaded from an individual file, variable fonts contain information in a single file from which many variations can be calculated. Variable fonts can increase performance, as well as providing much more design possibilities than before. In this section, you will load a variable font using the @font-face rule and tweak the display of the font to find the right variation.
To begin working with variable font, open styles.css in your text editor. First, remove all the @font-face rules from the previous section and replace them with the following new rule:
A variable font structurally looks the same as a standard @font-face rule. You first declare a font-family name, then supply a list of src values, although often with variable fonts only one format is necessary. The font-style property was set to normal for this font. A difference comes with the font-weight value. Instead of defining a single value, a range is written with the thinnest weight followed by the thickest weight. By defining this range, the browser can prepare for the possible variation calculations that will occur. Here you set the font-face rule for Raleway, with a font-weight range from 300 to 400 .
Next, you will need to establish Raleway in the font stack. Remove "Fira Sans" from the beginning of the font stack and replace it with Raleway . Since the name Raleway does not contain any spaces, it does not need to be in quotes:
Save your changes to styles.css and open index.html in your web browser. The browser produces true font weights instead of faux weights, but is not treating italics correctly due to a lack of defined italic style.
To set up the italic version of the Raleway variable font, return to styles.css in your text editor. Below the first @font-face rule, create a new rule set:
The src has changed its font file name from Raleway.woff2 to Raleway-Italic.woff2 , and the font-style value is now italic .
Save your changes to styles.css and refresh the page in your browser. The browser is now rendering the italic version of the various weights of Raleway. The following image shows the updated version of the page with a full Raleway variable font set:
The advantage of using variable fonts is that any whole numerical value defined in the font-weight range is available. While standard font weights increment by values of 100, variable fonts weights can increment by values as low as 1. This provides a method to fine-tune the visual design of the font in ways not possible before.
To use the weight values from the range, return to styles.css in your text editor and make the following changes:
For the h1 selector, you changed the font-weight value to 350 . Then, you set the h2 font-weight property to 570 and the h3 to 450 . Lastly, you created a strong element select with a font-weight property set to 650 .
Be sure to save your changes to styles.css , then return to your browser and refresh index.html . The browser now renders various weights of the Raleway font throughout the page. The following image shows how this appears in the browser:
In this final section, you loaded and used a variable font on your web page. Much more variation can come from one or two variable fonts than a dozen standard fonts. You also learned how to adjust a variable font to find the right variation for your design needs to a degree unlike before.
Conclusion
Fonts are a key component to the visual aesthetic of a design. They are highly sought after assets that help one website standout from another.
Throughout this tutorial, you learned the main ways fonts can be used on a website. You used local fonts and a font stack to tell the browser which fonts to try loading. Then, you used a font hosting service to effectively load the font Open Sans from Google Fonts. Next, you set up your own series of @font-face rules and created your own family of self-hosted fonts. Lastly, you built on what you learned loading your own fonts to use variable font and try out the versatility and performance they provide. Remember that it is important to always have fallback fonts in the font stack regardless if the font is local, from a hosting service, or self-hosted, because the font may not load for unknown reasons.
If you would like to read more CSS tutorials, try out the other tutorials in the How To Style HTML with CSS series.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Tutorial Series: How To Style HTML with CSS
Cascading Style Sheets (CSS) is the styling language of the web, and is used to design and control the visual representation of Hypertext Markup Language (HTML) on a web page. With CSS, you can manage everything from font to layout to animations on your web page. This series will lead the reader through CSS exercises that demonstrate the building blocks of the language and the fundamental design principles needed to make a user-friendly web site.