Как загрузить шрифт в браузере
Примечание. Вы можете нечаянно изменить масштаб страницы — например, нажав при прокрутке колесика мыши клавишу Ctrl . Чтобы вернуть нормальный масштаб, в правой части Умной строки нажмите значок .
В открывшемся меню нажмите кнопку:
— развернуть окно во весь экран.
Данные об измененном масштабе сохраняются в Яндекс Браузере. При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
Внимание. Если вы пользуетесь однокнопочной мышью в macOS, все жесты нужно выполнять, удерживая клавишу Ctrl и кнопку мыши.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
Шрифт
Чтобы задать общий для всех страниц шрифт:
Чтобы увеличить размер шрифта:
Нечеткий, бледный или ломаный шрифт
Отключите сглаживание шрифтов ClearType в настройках Windows.
Если у вас установлена программа GDIPP, отключите ее на время и проверьте, как отображаются шрифты.
Отключите глобальную функцию сглаживания FXAA в настройках видеокарты:
Более конкретные рекомендации вы найдете в Руководстве по использованию вашей видеокарты.
В браузерах на основе Chromium шрифты иногда становятся блеклыми. В этом случае попробуйте удалить шрифт Roboto:
Кодировка
Если текст на странице отображается неправильно, воспользуйтесь автоматическим переопределением кодировки или попробуйте изменить кодировку страницы вручную:
Внимание. Для отображения текста на редких языках потребуется установить дополнительные шрифты на компьютер.
Масштаб
Примечание. Вы можете нечаянно изменить масштаб страницы — например, нажав при прокрутке колесика мыши клавишу Ctrl . Чтобы вернуть нормальный масштаб, в правой части Умной строки нажмите значок .
Нажмите → Настройки → Сайты .
Нажмите значок .
В открывшемся меню нажмите кнопку:
— уменьшить масштаб,
— увеличить масштаб,
— развернуть окно во весь экран.
Данные об измененном масштабе сохраняются в Яндекс Браузере. При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
Нажмите → Настройки → Сайты .
WebFonts — это технология использования сторонних шрифтов на своей веб-странице. Один из примеров:
Если начинать с истоков, тег font был введен в 1995 году, а уже в 1996-м было написано программное определение на CSS. Начиная с версии CSS 2.0 была введена загрузка и синтез шрифта в браузерах, но тем не менее тогда еще популярный, а ныне старый и неактуальный IE не имел поддержки загрузки шрифтов, что мешало бурному развитию использования шрифтов на своем сайте.
В современном интернете веб-шрифты — это давно устоявшаяся вещь. На разных сайтах мы можем использовать разного рода шрифты, которые, в свою очередь, не включены в поставку той или иной операционной системы, однако есть нежелательный побочный эффект, о котором мы сегодня и поговорим.
Форматы файлов
Для подключения шрифтов используется программная вставка в CSS, так называемое @-правило. Итак, в простейшей форме @font-face — это такая декларация. Выглядит она следующим образом:
TTF или OTF — привычный нам файл шрифта, но подгружаемый с сервера на время просмотра сайта;
WOFF — незащищенный архив исходника OTF или TTF, пожалуй, самый важный формат, который поддерживают большинство популярных браузеров, а файлы в WOFF обычно 2–2,5 раза легче, чем исходные;
EOT — внедряемый TT OpenType архив, имеющий механизмы защиты, нужен для поддержки старых браузеров Internet Explorer (начиная с IE8, кроме TrueType кривых, поддерживаются и PostScript);
SVG — для поддержки браузера Safari.
Подготовленные к внедрению ( @font-face) на сайт шрифты на сегодняшний день должны быть сразу в нескольких форматах. Вы поняли, что существуют некоторые расхождения, так же как существует не один вид операционных систем. Форматов шрифтов достаточно много, но конкретный будет работать только в конкретном браузере. Что же касается этих самых форматов, отчего их так много нужно указывать при подключении, то они нужны для кроссбраузерной поддержки сайта.
Ежели вы хотите использовать вместо файла зашифрованный код, в этом случае к нам на помощь приходит base64, который работает по тому же принципу и с изображениями, однако для старого IE base64 не обрабатывается.
Embedded OpenType?
Как вы могли заметить, то подключаемые шрифты для IE имеют строчку с таким параметром:
В классическом варианте мы должны были указать с вами именно так:
Но при добавлении символа "?" после формата шрифта мы принудительно указываем браузеру не читать последующее указание — format('embedded-opentype'). Internet Explorer поддерживает вложение шрифтов через так называемый фирменный Embedded OpenType стандарт, начиная с версии IE 4.0. Он использует метод управления цифровыми правами для предотвращения копирования шрифтов, которые распространяются по лицензии.
Что, если не поддерживается шрифт в браузере?
Давным-давно уже были придуманы обходные пути, так называемые «костыли» для отображения того или иного шрифта. Бывают случаи, когда шрифт был разработан только в формате SVG, или же только в формате TTF.
1. В стародавние времена разработчики подключали изображение, которое в свою очередь было текстом, набранным в визуальном редакторе. Однако сейчас это считается дурным тоном, ибо поддержка довольна затруднительна (нужно снова открывать редактор, чтобы изменить текст картинки), соответственно пользователь не может скопировать текст с картинки.
2. Также распространенным являлось использование flash-решений.
3. Другим решением является использование Javascript, чтобы заменить текст с VML (для Internet Explorer) или SVG (для всех остальных браузеров).
Какие проблемы еще могут возникнуть?
Браузер будет пытаться синхронизировать подгрузку шрифта, он будет стараться спрятать текст, то есть сделать его невидимым, пока шрифт не был подгружен. Этот эффект называют FOIT, эффект «белой вспышки».
Один из веб-разработчиков Bram Stein опубликовал статью о том, как он исправил ситуацию, написав собственную реализацию полифила. Далее приведем пример подобной проблемы и ее решения.
Эффект вспышки
Эффект FOIT в таких браузерах, как Safari, Chrome, Opera, Firefox имеет тенденцию скрывать текст в течении максимум 30 секунд перед отказом в получении шрифта, после чего устанавливается шрифт по умолчанию.
Пример того, как загружается шрифт:
И все-таки, 2.7 секунды — это долгое время!
Что же можно сделать?
Изначально подход заключался в том, чтобы включить преобразование файлов шрифта в данные URIs так, чтобы те шрифты могли быть включены непосредственно в определения семейства шрифтов в файле CSS. Загружая этот файл CSS асинхронным способом, можно гарантировать, что браузер немедленно отдаст текст в странице, используя кастомные шрифты, а новые шрифты применялись бы, как только CSS был бы загружен.
Однако, в любом эксперименте есть побочный эффект.
Изначально Bram Stein использовал кастомный шрифт, но после того, как его шрифт был подгружен, происходило «мерцание», в примере на 0.7 секунде:
Короче говоря, мерцание происходит тогда, когда браузер пытается отобразить шрифт из font-family и применить его в html. Шрифт, определенный в @font-face декларации, который не был еще загружен.
Bram Stein показал, как правильно подключать шрифты, он разработал скрипт, альтернативу от google для асинхронной подгрузки шрифтов, это скрипт — FontFaceObserver.
Пробуем
Анализ
Стандартное подключение от Google
Честно говоря, используя больше одного шрифта на сайте можно конкретно замедлить скорость загрузки страницы сайта, тем самым увеличивая общее время загрузки. Google Fonts API позволяет быстро добавить шрифт на сайт, используя генератор шрифтов, тем самым быстрее проектировать свой сайт. Однако, нужно помнить об эффекте FOIT. Общее время загрузки — 322 мс.
Web Font Loader от Google
Web Font Loader — JavaScript библиотека для расширенной работы с API, библиотека, которая дает нам больше контроля над подгрузкой шрифта, чем стандартный API Google Fonts. Скрипт позволяет нам использовать множество шрифтов, подгружая их последовательно или асинхронно. В отличие от стандартного подключения, на слабых соединениях показывается текст со стандартным шрифтом, до тех пор, пока не будет загружен шрифт.
Общее время загрузки: 1132 мс
FontFaceObserver — это JavaScript библиотека (5кб), так называемый подгрузчик совместимый с любым веб-обслуживанием шрифта. Скрипт позволяет уведомить нас о том, загрузился ли шрифт или нет, позволяет отслеживать событие после загрузки и до загрузки шрифта. Общее время загрузки: 159 мс
В предыдущем посте я писал о системных шрифтах и их преимуществах перед веб-шрифтами. Я поддерживал подход «сначала системные шрифты», утверждая, что по сравнению с системными шрифтами веб-шрифты (а) могут отрицательно повлиять на производительность, (б) использовать больше данных и (в) увеличить энергопотребление вашего сайта. Но сеть без веб-шрифтов была бы гораздо менее интересной — возможно, используя веб-шрифты более ответственно, мы сможем получить все их преимущества, сведя к минимуму недостатки.
В первой части этого руководства я расскажу о пяти методах улучшения производительности веб-шрифтов, которые, на мой взгляд, дают наибольший эффект при минимальных усилиях.
Благодарим Зака Лезермана, который подробно писал о веб-шрифтах на своем сайте. Стоит прочитать все его статьи, особенно The Font Loading Checklist и A Comprehensive Guide to Font Loading Strategies (которое действительно очень исчерпывающее), обе из которых оказались очень полезными, пока я писал этот пост.
В этом посте я буду использовать два термина, которые часто используются как синонимы, но которые традиционно относятся к разным вещам:
Гарнитура (typeface) — это полное семейство шрифтов, имеющих общий дизайн. Шрифт может включать любое количество начертаний или стилей (а в те времена, когда использовался металл или дерево, размеры тоже). Helvetica — это пример шрифта. Вы можете думать о гарнитуре как о семействе шрифтов.
Шрифт (font) — это единое начертание и стиль гарнитуры. В случае физического типа каждый шрифт будет помещен в свое собственное поле, содержащее глифы определенного размера, веса и стиля, например, «Helvetica Bold Italic на 10 типографском пункте». Векторный дизайн современных цифровых шрифтов позволяет бесконечно масштабировать один шрифт вверх и вниз, но вам все равно понадобится отдельный файл для каждого веса и стиля (если вы не используете вариативные шрифты, но это тема для второй части).
1. Используйте самые современные форматы файлов
Web Open Font Format 2.0 (woff2) на момент написания является самым маленьким и наиболее эффективным форматом файлов для веб-шрифтов. При использовании @ font-face at-rules в CSS убедитесь, что шрифт woff2 отображается раньше старых, менее эффективных форматов файлов, таких как ttf. Браузер будет использовать первый шрифт в списке, который он понимает, даже если это файл большего размера.
Если вам не нужна поддержка IE8, вам не понадобится ничего, кроме woff2 и woff. Если вам не нужна поддержка IE11, вам понадобится только woff2.
Если у вас есть только файл ttf (например, если вы загрузили шрифт из Google Fonts), вам нужно будет преобразовать его с помощью такого инструмента, как Online Font Converter. Если вы не используете шрифт с полностью открытой лицензией, сначала проверьте, разрешает ли это лицензия.
2. Используйте дескриптор font-display
Есть два акронима, которые вы часто увидите, когда начнете разбираться в стратегиях загрузки шрифтов:
- Flash of Invisible Text (foit) — это период времени, в течение которого текст невидим до того, как браузер загрузит веб-шрифт.
- Flash of Unstyled Text (fout) — это период времени, в течение которого текст отображается с использованием резервного шрифта до того, как браузер загрузит веб-шрифт.
Ничто из перечисленного не идеаленьно, но если вы используете веб-шрифты, что-то из этого, вероятно, произойдет при первом посещении вашего веб-сайта пользователем (надеюсь, при загрузке второй страницы браузер сможет обслуживать шрифты из своего кэша). Если мы возьмем наше at-rule font-face из предыдущего и добавим дескриптор font-display, мы сможем указать браузеру, какой из них мы предпочитаем.
Существует пять возможных значений font-display: первое, auto — поведение браузера по умолчанию (большинство браузеров предпочитают foit). Вот еще четыре:
swap сообщает браузеру, что мы хотим, чтобы текст отображался с использованием резервного шрифта до тех пор, пока веб-шрифт не будет загружен (т.е. мы предпочли бы использовать fout). Независимо от того, займет ли это 5 секунд или 5 минут, как только шрифт будет загружен, он будет заменен. Это хорошая основа, потому что она позволяет посетителям веб-сайта сразу же начать читать ваш контент, но обязательно выберите аналогичный вариант (мы: Во второй части этой серии статей мы рассмотрим резервные варианты), чтобы предотвратить сильное смещение макета при смене шрифтов.
block
Если мы предпочитаем, чтобы браузер скрыл текст до тех пор, пока не загрузится веб-шрифт (т.е. мы предпочли бы foit), мы можем использовать font-display: block. Однако текст не останется невидимым навсегда: если шрифт не загружается в течение определенного периода (обычно трех секунд), браузер все равно будет использовать резервный шрифт, заменяя его веб-шрифтом после его загрузки.
Если вам кажется, что это лучший вариант, потому что вы считаете, что изображение выглядит плохо, помните, что когда текст невидим, ваша страница не может использоваться, а ваш контент читься.
fallback
fallback аналогичен swap с двумя отличиями:
- Он начинается с невероятно маленького (~ 100 мс) периода «блока», когда текст скрывается, после чего отображается резервный шрифт.
- Если веб-шрифт не загружается в течение короткого периода времени (~ 3 с), резервный шрифт будет использоваться до конца действия страницы.
Если вас не беспокоит, видит ли пользователь ваш веб-шрифт при первом посещении вашего сайта (скорее всего, они не так уж сильно переживают из-за этого), fallback — хороший выбор.
optional
optional похож на fallback, но дает шрифту очень короткий период времени (~ 100 мс) для загрузки, после чего он не будет заменен. Однако у него есть дополнительная функция, позволяющая браузеру решить прервать запрос шрифта, если соединение слишком медленное для загрузки шрифта.
Каждый шрифт на вашей странице будет иметь свой период foit/fout — шрифты меняются местами по отдельности при загрузке, а не когда они все загружены. Это может привести к нежелательному поведению (см. Проблему веб-шрифтов Mitt Romney). Для полного контроля над загрузкой шрифтов вам нужно изучить решения JavaScript (о которых мы поговорим во второй части).
3. Предварительно загрузите файлы шрифтов
Чтобы свести к минимуму период foit/fout, мы хотим загружать наши файлы веб-шрифтов как можно быстрее. Используя link rel = "preload" в нашем html head , мы можем указать браузеру начать выборку наших шрифтов раньше. Добавьте следующий тег в верхнюю часть вашего head (перед любым css), установив атрибут href для URL-адреса вашего файла шрифта:
link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin
Добавляя этот тег, мы говорим браузеру начать загрузку нашего файла шрифта прямо сейчас, тогда как обычно это не начнется, пока он не найдет ссылку на конкретный шрифт в вашем CSS и не найдет элемент dom, который его использует.
Браузеры обычно достаточно умны, чтобы загружать шрифты только в том случае, если они необходимы на текущей странице. Использование предварительной загрузки отменяет это поведение, заставляя браузер загружать шрифт, даже если он не используется. По этой причине всегда предварительно загружайте только один формат каждого шрифта (woff2, если он у вас есть).
Чем больше шрифтов вы предварительно загрузите, тем меньше пользы вы получите от этого метода, поэтому отдавайте предпочтение тем шрифтам, которые отображаются «над сгибом» (первые 100vh, которые пользователь видит без прокрутки).
Вы можете узнать больше о предварительной загрузке в этой статье Йоава Вайсса: Preload: What Is It Good For?
4. Подберите файлы шрифтов
Создав поднабор шрифта, мы можем сгенерировать новый меньший файл шрифта, который включает только глифы (глиф — это отдельный знак или символ), которые нам нужны. Я использовал инструмент Font Subsetter в Everything Fonts, чтобы подобрать шрифт Space Grotesk Bold, используемый для заголовков на этом сайте для включения только символов из диапазона «Basic Latin». Это уменьшило размер файла версии woff2 с 30 КБ до 7 КБ.
Подмножество — мощный инструмент, но он имеет некоторые потенциальные недостатки. Если вы создаете веб-сайт, на котором отображается пользовательский контент, имена людей или названия мест, вам следует использовать символы, отличные от 26 стандартных букв, 10 цифр и нескольких символов, распространенных в английском письме.
Как минимум, вам следует подумать о диакритических знаках: глифах, которые появляются над или под символом, которые изменяют его произношение. Они распространены на языках, включая французский, испанский, вьетнамский, а также в транслитерированном (или «романизированном») тексте из таких алфавитов, как греческий или иврит; они также появляются в заимствованных словах (словах, взятых из другого языка).
Если вы слишком активно подбираете подмножества, вы можете даже получить сочетание шрифтов в одном слове.
Если бы я хотел написать о поделаках, мне, возможно, пришлось бы настроить файл подмножества шрифтов, который я использую для заголовков. Обратите внимание, как формы «â» и «é» (с диакритическими знаками) не соответствуют версиям этих букв без диакритических знаков.
К счастью, вам не нужно вручную проверять каждую страницу вашего сайта на наличие разных символов. Glyphhanger — это инструмент командной строки, который выполняет две функции: во-первых, он просматривает ваши веб-страницы и определяет используемые диапазоны символов Юникода (эти диапазоны соответствуют скрипту или языку, например, «Базовая латынь», «Кириллица», «Тайский»); во-вторых, он представляет собой подмножество файла шрифта, выводя новую версию, содержащую только символы из указанных диапазонов.
Начать работу с Glyphhanger может быть немного сложно (вам понадобятся python и pip) — Сара Суейдан объясняет, как ей удалось это сделать в этой статье: How I set up Glyphhanger on macOS for optimizing and converting font files for the Web.
Как и при изменении форматов файлов, убедитесь, что лицензия на ваш шрифт допускает подмножество.
5. Разместите шрифты самостоятельно
Это не универсальное правило, как большинство других. Есть две веские причины, по которым вы можете захотеть использовать размещенный сервис, такой как Google Fonts или Adobe Fonts:
Часто это самый дешевый или единственный законный способ использования определенных гарнитур в Интернете. Если у вас нет другого выбора, кроме как использовать одну из этих служб, узнайте, поддерживает ли она подмножество или добавление дескрипторов отображения шрифтов.
Они удобны: копирование и вставка строки html в вашего сайта будет быстрее, чем альтернатива: загрузка файлов шрифтов, преобразование и подмножество файлов шрифтов, затем написание @ font-face at-rules для каждого веса и стиля.
Если вы все еще используете Google Fonts исключительно из-за удобства, обратите внимание на google-webfonts-helper. Этот инструмент позволяет вам создать собственный пакет веб-шрифтов из полного набора шрифтов Google, определить нужные вес и наборы символов, а затем предоставить вам одну загрузку, содержащую все файлы css и шрифтов (в новейших форматах), которые вам нужны.
Миф №1 о веб-шрифтах
Возможно, вы слышали утверждение (которое повторяется в Google Fonts) о том, что если пользователь ранее посещал сайт, который загружает те же шрифты из того же источника, браузеру не нужно загружать их снова, потому что они кэшированы.
Когда-то это могло быть правдой, но я не могу найти доказательств того, что это достаточно обыденное явление, которое влияло бы на что-то. Фактически, и Google Chrome, и Safari явно запрещают совместное использование кэшированных сторонних ресурсов в разных доменах из-за проблем с отслеживанием.
Вот список веских причин не использовать размещенную службу и вместо этого размещать шрифты самостоятельно:
Производительность
Поиск домена требует времени, вы можете использовать предварительные подсказки ресурсов для облегчения ситуации, но всегда производительность всегда снижаться из-за открытия TCP-соединения с новым доменом. Возможно, поэтому на некоторых собственных сайтах Google (включая web.dev) теперь используются собственные шрифты вместо шрифтов Google.
Конфиденциальность
Платные службы веб-шрифтов, такие как Adobe Fonts, должны определять просмотры страниц для рассчетов, но они могут собирать больше данных, чем это строго необходимо. Если у вас есть выбор, загрузите шрифты с помощью css ( link rel = "stylesheet" ) вместо JavaScript ( script ), чтобы минимизировать объем данных, которые сторонняя организация может собирать о ваших пользователях.
Контроль
С автономными шрифтами вы полностью контролируете то, как именно вы загружаете шрифты, что позволяет вам обслуживать пользовательские подмножества, определять параметры отображения шрифтов и указывать, как долго браузер должен кэшировать файлы шрифтов.
Надежность
Сторонние сервисы могут замедляться, отключаться или вообще переставать работать. При самостоятельном размещении шрифтов, пока ваш веб-сайт работает, ваши шрифты будут доступны.
Заключение
Каждый из этих шагов может иметь преимущества сам по себе, но их совместное использование может привести к большим улучшениям. Если вы решите реализовать некоторые из шагов, описанных в этой статье, попробуйте использовать такой инструмент, как Lighthouse или Web Page Test до и после внесения изменений, чтобы увидеть эффект каждого отдельного изменения.
Во второй части мы рассмотрим некоторые более сложные техники, включая стратегии загрузки шрифтов JavaScript и вариативные шрифты. Мы также увидим важность выбора правильных резервных шрифтов и введем новый акроним — FOFT, Flash Of Faux Text.
Чтобы не терять свои находки по дизайну в тоннах закладок на компе, я создала телеграм-канал Дрын Дезигн. Все клевые и полезные материалы (туториалы, статьи, ссылки на аккаунты клевых чуваков), которые нахожу для себя, я буду постить туда. Угощайтесь.
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые 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
Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, 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 .
Предзагрузка шрифтов
Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.
Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.
Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :
Также необходимо добавить тип ресурса, в данном случае — font . Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.
Уменьшение количества глифов шрифта
По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.
Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.
Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.
Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:
В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.
Полезности
HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.
Если у вас на компьютере уже установлен специфический шрифт, то в стилях достаточно добавить строку.
Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам . Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.
Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.
Как видите, преимуществ очень много. Небольшие минусы тоже имеются и для баланса их стоит упомянуть.
- Не все версии браузеров поддерживают загружаемый шрифт и один для всех формат.
- Файл, содержащий гарнитуру шрифта, может занимать большой объём, замедляя тем самым загрузку веб-страницы.
В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.
Формат | |||||||
TTF | 9 | 12 | 4 | 10 | 3.1 | 3.5 | 2.2 |
EOT | 5 | ||||||
WOFF | 9 | 12 | 5 | 11.5 | 5.1 | 3.6 | 4.4 |
SVG | 3.2 | 3 |
Самые поддерживаемые форматы — TTF и WOFF. За исключением IE до версии 9.0 все браузеры их прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).
Пример 1. Подключение TTF
Вначале загружаем сам файл шрифта с помощью правила @font-face. Внутри него пишем название гарнитуры шрифта через font-family и путь к файлу через src . Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1 , как показано в примере, задаём свойство font-family с именем загруженного шрифта. Для старых версий IE через запятую перечисляем запасные варианты. В данном случае шрифт заголовка будет «Comic Sans MS», поскольку IE8 и ниже не поддерживает формат TTF.
Результат данного примера показан на рис. 1.
Рис. 1. Заголовок с загруженным шрифтом
Что делать, если вам позарез нужен свой шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.
Для конвертации имеется несколько онлайновых сервисов, позволяющих загрузить TTF-файл и на выходе получить EOT-файл. К сожалению, у большинства этих сервисов одна и та же беда — файл мы получаем, но русский язык в нём не поддерживается. В итоге нужный результат не достигается, конвертация происходит неверно. Среди проверенных сайтов оказался один, показавший текст в IE правильно.
Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src . Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url , указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.
src: url(font/pompadur.ttf), url(font/pompadur.ttf);
src: local(pompadur), url(font/pompadur.ttf);
src: local('bla bla'), url(font/pompadur.ttf);
Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.
Пример 2. Подключение EOT
Google Web Fonts
Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).
Рис. 2. Выбор шрифтов в Google Web Fonts
Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.
Рис. 3. Загружаемые на страницу шрифты
Подключить выбранные шрифты можно одним из трёх путей, добавляемый код можно скопировать ниже по странице.
1. Через элемент . Строка будет иметь примерно следующий вид.
2. Через правило @import . Такую строку вставляем в свой CSS-файл в самом верху.
3. Через JavaScript.
В принципе, все пути равноценны, так что выбирайте по своему предпочтению.
Преимущества применения данного сервиса такие.
- Шрифты свободны для использования, вам не нужно за них платить.
- Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
- Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.
Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.
Использовать Google Web Fonts или нет решать вам. Если не нашли там подходящего шрифта, всегда можно подключить популярный и распространённый TTF. Тем более, что он поддерживается последними версиями всех популярных браузеров.
Читайте также: