Css как подключить сторонний шрифт

Содержание
  1. Свой шрифт на странице
  2. . Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.
  3. Google Web Fonts
  4. Как загружать посторонние шрифты
  5. Как подключить и оптимизировать нестандартные шрифты
  6. Подключение шрифтов с помощью Google Fonts
  7. Подключение шрифтов с помощью правила @font-face
  8. Оптимизация
  9. FOIT, FOUT и FOFT
  10. Свойство font-display
  11. Предзагрузка шрифтов
  12. Уменьшение количества глифов шрифта
  13. Полезности

Свой шрифт на странице

Шрифт является неотъемлемой частью веб-дизайна, придаёт сайту выразительность и узнаваемость, выражает характерный стиль сайта и непосредственно связан с восприятием текстов. Хорошо подобранный шрифт может не замечаться, но без него не будет той изюминки, придающей дизайну сайта завершённость.

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

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам

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

Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.

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

В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.

Табл. 1. Поддерживаемые форматы

Формат Internet Explorer Chrome Opera Safari Firefox Android iOS
TTF 9.0+ 4.0+ 10.0+ 3.1+ 3.5+ 2.2+
EOT 5.0-8.0
WOFF 9.0+ 5.0+ 3.6+
SVG 1.0+ 9.0+ 3.1+ 3.5+ 1.0+

Самый поддерживаемый формат — TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).

Пример 1. Подключение TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Заголовок с загруженным шрифтом

Что делать, если вам позарез нужен витиеватый шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.

Для конвертации имеется несколько онлайновых сервисов, позволяющих загрузить TTF-файл и на выходе получить EOT-файл. К сожалению, у большинства этих сервисов одна и та же беда — файл мы получаем, но русский язык в нём не поддерживается. В итоге нужный результат не достигается, конвертация происходит неверно. Среди проверенных мной сайтов оказался один, показавший текст в IE правильно.

src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local(‘bla bla’), url(fonts/pompadur.ttf);

Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.

Пример 2. Подключение EOT

HTML5 CSS3 IE Cr Op Sa Fx

Что касается iOS, то делать и загружать отдельный шрифт в формате SVG как мне кажется нет особого смысла. Аудитория сайтов просматривающая его через iOS пока невелика, к тому же версию сайта под мобильные устройства стараются облегчить, и загружать дополнительные несколько десятков килобайт не желательно.

Google Web Fonts

Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts. Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.

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

Рис. 2. Выбор шрифтов в Google Web Fonts

Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.

READ  Как подключить обогрев зеркал на рено дастер

Рис. 3. Загружаемые на страницу шрифты

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

3. Через JavaScript.

В принципе, все пути равноценны, так что выбирайте по своему предпочтению.

Преимущества применения данного сервиса такие.

Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.

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

Источник

Как загружать посторонние шрифты

Как правильно загружать посторонние шрифты? — спрашивают наши зрители Алексей и Марат. Спасибо за важный вопрос, ребята. Плохим подключением шрифтов можно очень сильно навредить загрузке сайта, вплоть до невозможности его прочесть. К счастью, есть надёжные варианты и даже новое свойство font-display. Давайте разберёмся!

Скажу сразу: лучший шрифт — тот, который вы не подключили. Прошло уже 20 лет с тех пор, как Microsoft подарила вебу корневой набор шрифтов, и они уже всем надоели: Arial, Courier, Georgia, Trebuchet, Verdana и другие. Но с тех пор появилось много других хороших встроенных семейств: Roboto на Android, San Francisco на macOS и iOS, Segoe UI на Windows. И при желании, можно насобирать приличных комбинаций для любого интерфейса.

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

Для подключения шрифтов есть директива @font-face, где на сегодня нужно подключить две версии: WOFF и WOFF 2. Это такой специальный контейнер, который очень эффективно сжимает шрифт и поддерживается даже в IE9. WOFF 2 сжимает лучше всего, поэтому указывайте его первым. Никаких TTF, OTF, SVG, EOT — эти контейнеры слишком неэффективные и нужны в браузерах, которых уже нет в вашей статистике.

Там же можно указать локальные псевдонимы шрифта: в одном название, в другом его PostScript-версию — на случай если они уже установлены в системе. Например, вы можете не загружать Roboto на Android или Ubuntu на Ubuntu — они системные. Многие не знают, что в macOS уже давно встроен шрифт PT Sans, Serif и Mono. Браузер сначала попробует найти их локально и только потом, если не найдёт, пойдёт загружать. Такой способ использует Google Fonts, когда вы подключаете в голову документа стили с параметрами.

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

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

Если браузер сразу видит, что ему нужен шрифт — он начинает его загружать. И в этот момент происходит ужасное: большинство браузеров показывают сайт, но прячут текст, который ждёт шрифта, пока он не загрузится. Этот эффект называется FOIT или мелькание невидимого текста. К счастью Chrome, Firefox и Safari 10 перестают ждать после 3 секунд и показывают следующий шрифт по списку. Вот почему важно иметь подходящий запасной список. Chrome на медленных сетях вообще не ждёт, а Safari 9 и старые Android ждут как Хатико — до последнего.

Лучше всего в такой ситуации действуют IE и Edge, прикиньте? Они никогда не прячут текст и всегда показывают следующий системный шрифт, пока грузится внешний. Когда шрифт загрузился — текст перерисовывается. Это может приводить к неприятным скачкам, которые кидают страницу туда-сюда как плохие картинки без размеров. Этот эффект называется FOUT или мелькание текста без стилей. Но, знаете, лучше пусть текст прыгнет пока я его читаю, чем не прыгнет, пока я его не вижу — правда? Этот эффект считается наиболее удачным и его пытаются воспроизвести разными способами: от скриптов до новых CSS-свойств.

READ  Как подключить плиту hansa fccx 58226

Лучший скрипт для имитации FOUT — это «Font Face Observer» Брэма Штайна — всего 3,5 килобайта. Он умеет загружать шрифты, следить за их появлением и делать что-то в результате. Можно использовать как шрифты из ресурсов сайта, так и сторонние из Google Fonts, Typekit и других. Вы прячете использование шрифта за класс в HTML, который выставляет скрипт при загрузке. Браузер видит это и перерисовывает текст. После удачной загрузки полезно ещё кидать флаг в sessionStorage и проверять его в самом начале — пока окно открыто, скрипт не нужен.

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

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

Вариантов и стратегий загрузки довольно много — есть даже специальный Font Loading API в браузерах, для полного контроля. Если вам нужно разобраться и найти идеальное решение — читайте статьи Брэма Штайна и Зака Лезермана, самых авторитетных авторов по загрузке шрифтов. Оценить успех ваших экспериментов поможет замедление или тротлинг сети во вкладке Network отладчика Chrome. Включите GPRS и узнайте много неутешительного о своём сайте.

Но это всё костыли! Почему бы всем браузерам просто не сделать как IE и Edge? — спросите вы. Потому, что можно ещё лучше. Новое свойство font-display уже год сидит за флагами в Chrome и Firefox и на днях появилось в стабильном Chrome 60. Оно позволяет контролировать как именно браузер рендерит шрифты при загрузке. Значение block прячет текст на три секунды и долго ждёт загрузки, swap делает похоже, но показывает системный шрифт сразу, fallback почти сразу показывает системный и недолго ждёт загрузку, optional — как fallback, но браузер уже сам решает стоит ли загружать шрифт.

Запомните главное: просто так подключить font-family и надеяться, что браузер сам всё разрулит, пока рано — поддержка font-display ещё слабая. Подберите хороший системный шрифт и подключите внешний через Font Face Observer — ваши пользователи скажут вам спасибо.

Источник

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

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

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

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

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

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

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

READ  Как подключить пропановый баллон к котлу

Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве 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.

Источник

Поделиться с друзьями
Как подключить и установить...
Adblock
detector