Как подключить otf шрифт к сайту

Нестандартные шрифты в CSS и HTML и сжатие шрифтов с помощью fontoptimizer

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

[toc depth=»2″ listtype=»ul» title=»Содержание»]

Зачем нужен font-face?

font-face используется для того, чтобы подключить к HTML-странице нестандартные шрифты через CSS. В большинстве современных броузеров будет отлично работать как TrueType шрифт (ttf) так и OpenType (otf). Во всех, кроме Internet Explorer. Но для них есть свой шрифт, и об этом позже.

Как подключить нестандартный ttf или otf шрифт в CSS?

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

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

После этого любой объект с классНеймом my_customized_font будет использовать нестандартный шрифт.
Но, как и всегда в случаях чего-то очень удобного и нестандартого, TrueType и OpenType шрифты не будут отображаться в броузерах от Microsoft.

Нестандартные шрифты средствами HTML и CSS в Internet Explorer.

К слову Internet Explorer начал поддерживать нестандартные шрифты в CSS еще с 4-й версии (сегодня актуально 8-мая, и доступна 9-тая версии!). Но при этом, как всегда, технология Microsoft отдаёт маразмом. Для того, чтобы подключить сторонний шрифт в HTML необходимо перевести его в специфический формат EOT, который сам по себе ничем не отличается от TTF или OTF, но разработан Microsoft специально для внедрения в HTML.
С точки зрения CSS подключить нестандартный шрифт в CSS так, чтобы он правильно отображался в Internet Explorer можно так:

То есть сначала нужно указать шрифт для Internet Explorer, а потом «затереть» его шрифтом для других броузеров. Когда Internet Explorer дойдет до правила с ttf или otf шрифтом, и не сможет подключить файл шрифта, он не станет изменять уже загруженный eot шрифт, в тоже время другие броузеры дойдя до второго правила с ttf шрифтом, успешно заменят шрифт качественным ttf.

Ещё один способ подключить нестандартный шрифт в IE

Internet Explorer, как известно достаточно странные броузер. Достаточно просто взглянуть на то, как именно он отображает стандартные правила CSS 2.1. У ранних версий (а именно у 6-й) есть баг в парсинге URL. Если URL в правиле CSS написать «#», то весь текст, идущий за «#» будет восприниматься как продолжение ссылки, даже если там указаны кавычки и другие мелочи. Поэтому можно подключить сторонний шрифт одним правилом font-face и для IE и для других броузеров. Вот таким образом:

Таким образом Internet Explorer загрузит только EOT шрифт, пытаясь загрузить его по ссылке css/fonts/ptsans.eot#’) format…
А другие броузеры без проблем выберут TTF шрифт, и загрузят его.

Конвертация TrueType (TTF) и OpenType (OTF) шрифтов в EOT

Об этом можно писать отдельную статью, потому, что средств сегодня достаточно много, хотя еще несколько лет назад, для этого была только одна программа, разработанная Microsoft под Windows (не доступная для пользователей других ОС).
Особого внимания заслуживает программка fontoptimizer написанная на PERL, и соответственно абсолютно кроссплатформенная.
Надо сказать, что мне доставило огромное удовольствие использоваие этой программы на моем Mac. Программа запускается прямо из терминала и позволяет не только конвертировать шрифты из ttf в eot, но сжимать их, удаляя ненужные биты и байты, и даже удаляя ненужные глифы (символы).
Скачать fontoptimizer можно здесь: fontoptimizer

Для того, чтобы сконвертировать шрифт из ttf в eot с помощью fontoptimizer достаточно вызвать в терминале (или в консоли)

Оптимизация размера файла шрифта для Web

Файлы шрифтов могут быть достаточно громоздкими. От нескольких сотен килобайт и до нескольких мегабайт. И их размер очень сильно влияет на скорость загрузки сайта. Поэтому логично оптимизировать размер шрифтов. Как? Очень просто:

Читайте также:  Как подключить ipad mini к телевизору через hdmi

Это можно сделать с помощью той же утилиты fontoptimizer.
Всё что тебе понадобится это:

А далее все проще простого:

Где chars.txt – файл с набором символов, которые нужно оставить в файле шрифта (файл с символами обязательно должен быть в кодировке UTF8), ну а infile.ttf и outfile.ttf – входящий и выходящий файлы соответственно.
Во время тестирования с помощью fontoptimizer удалось получить из 450Kb-го файла 12Kb-й, что очень ускорило загрузку страницы.

Сервис для автоматического создания font-face, с оптимизацией и конвертацией ttf во все возможные форматы

Если лень делать все ручками, и если это не интересно или просто нет времени, то к твоим услугам отличный сервис, который сам производит оптимизацию шрифтов, конвертирует TTF в EOT, SVG, WOFF и другие форматы, которые можно загружать через font-face, и на выходе выдает архив со всеми файлами, и полностью прописанными правилами font-face для твоего шрифта. Разве не здорово?
Сервис доступен по адресу: www.fontsquirrel.com
Думаю в настройках ты разберешься 🙂

О недостатках

При всех преимуществах у подключения сторонних шрифтов на страницу есть 2 существенных недостатка:

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оптимизация

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

Читайте также:  Как подключить четыре колонки к компу

FOIT, FOUT и FOFT

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

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

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

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

Свойство font-display

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

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

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

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

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

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

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

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

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

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

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

Полезности

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

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

Источник

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

Как правильно загружать посторонние шрифты? — спрашивают наши зрители Алексей и Марат. Спасибо за важный вопрос, ребята. Плохим подключением шрифтов можно очень сильно навредить загрузке сайта, вплоть до невозможности его прочесть. К счастью, есть надёжные варианты и даже новое свойство 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, когда вы подключаете в голову документа стили с параметрами.

Читайте также:  Сабвуфер мистери активный мтв 300а как подключить к компьютеру

В отдельных директивах подключаются все нужные начертания: прямое, жирное, курсив, жирный курсив. Если в каждой из директив указывать одно и то же название, а комбинацией 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-свойств.

Лучший скрипт для имитации 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 — ваши пользователи скажут вам спасибо.

Источник

Поделиться с друзьями
Делаю сам
Adblock
detector