Загрузите файл шрифта в формате woff

Обновлено: 05.01.2025

Использование пользовательских шрифтов на веб-страницах

Текстовый контент всегда был важной частью веб-сайтов, но в первые дни Интернета дизайнеры и разработчики были строго ограничены в типографском контроле, который они имели над своими веб-страницами. Это включало ограничение на шрифты, которые они могли надежно использовать на своих сайтах. Вы, вероятно, слышали термин «безопасные веб-шрифты», упомянутый в прошлом. Это относится к небольшому набору шрифтов, которые, скорее всего, будут включены на компьютер человека, а это означает, что если на вашем сайте используется один из этих шрифтов, можно с уверенностью сказать, что он будет корректно отображаться в браузере человека. Сегодня у веб-профессионалов есть множество новых шрифтов и опций ввода, одним из которых является формат WOFF.

Что такое WOFF?

WOFF является аббревиатурой, которая расшифровывается как «Web Open Font Format». Он используется для сжатия шрифтов для использования со свойством CSS @ font-face. Это способ встраивания шрифтов в веб-страницы, так что вы можете использовать специализированные шрифты, помимо типичных «Arial, Times New Roman, Georgia», которые являются одними из тех вышеупомянутых безопасных веб-шрифтов.

WOFF был представлен W3C в качестве стандарта для упаковки шрифтов для веб-страниц. Это стало рабочим проектом 16 ноября 2010 года. Сегодня у нас фактически есть WOFF 2.0, который улучшает сжатие по сравнению с первой версией формата почти на 30%. В некоторых случаях эта экономия может быть еще более существенной!

Зачем использовать WOFF?

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

Шрифты WOFF имеют следующие преимущества:

Они более доступны, чем шрифты в виде изображений. WOFF разрабатывает простой HTML-текст с помощью CSS, предоставляя вам доступность и контроль дизайна, которые изображения не допускают.
Файлы WOFF содержат типографскую информацию, такую как контекстные формы и рисунки старого стиля. Это дает вашим веб-страницам лучшую типографику, потому что вы используете правильные символы, а не только приблизительные значения.
Шрифты WOFF могут помочь с интернационализацией, потому что вы можете вставлять шрифты с символами из других языков.
Как и весь текст в стиле CSS, шрифты в стиле WOFF более удобны для поисковых систем. Поисковые системы не «видят» текст, встроенный в изображение, и хотя текст ALT может помочь, ничто не заменит сам текст.
Шрифты WOFF сжаты, поэтому они меньше, чем другие типы файлов шрифтов. Это поможет скорости загрузки сайта и общей производительности.
Вы можете использовать файлы WOFF для сохранения идентичности вашего бренда, встраивая ваши корпоративные шрифты в файлы WOFF.

Поддержка браузера WOFF

WOFF имеет отличную поддержку браузеров в современных браузерах, в том числе:

Chrome 6+
Firefox 3.6+
Internet Explorer 9+
Opera 11.1+
Safari 5.1+

В настоящее время он практически поддерживается всеми приложениями, за исключением всех версий Opera Mini.

Как использовать шрифты WOFF

Чтобы использовать файл WOFF, вам необходимо загрузить файл WOFF на ваш веб-сервер, дать ему имя с

, а затем вызовите шрифт в вашем CSS. Например:

) в свой стек шрифтов CSS, как и любое другое имя шрифта:

Где взять шрифты WOFF

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

Открытая библиотека шрифтов
Шрифт Белка

Если у вас есть лицензия на использование шрифта, который недоступен в формате WOFF, вы можете использовать создатель WOFF, например, Font Squirrel, для преобразования файлов шрифтов в файлы WOFF. Существует также инструмент командной строки под названием

, который вы можете использовать в Macintosh и Windows для преобразования ваших шрифтов TrueType/OpenType в WOFF. Загрузите двоичный файл, соответствующий вашей системе, и запустите его из командной строки (или терминала) и следуйте инструкциям.

Пример WOFF

Оригинальная статья Дженнифер Крынин. Отредактированный Джереми Жираром 7/11/17

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

Задачи

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

Как это сделать

Асинхронная загрузка шрифтов как CSS решает задачи № 1 и № 2. Но к сожалению, вызывает мерцание при каждой загрузке страницы. Браузеры уже отрисовали текст запасным шрифтом к тому моменту, когда загрузился веб-шрифт. Поэтому они заменяют тексты, что вызывает некоторое мерцание.
Идея состоит в том, чтобы загружать шрифт с сервера только один раз. После этого мы сохраняем данные в localStorage, и при последующих запросах мы будем загружать шрифт непосредственно оттуда. Это уберёт мерцание при повторных загрузках, оно останется только при первом открытии страницы. Таким образом, задача № 3 также решается.
Довольно сложно распознать поддержку WOFF2 в браузере, если мы не хотим полагаться на распознавание User Agent. Лучшее, что я смог найти — очень продуманный скрипт от Filament Group, использующий API загрузки шрифтов. Он не решает задачу на все 100%, однако не даёт неправильных результатов, что приемлемо в нашем случае.

Обзор скрипта

Для старых браузеров мы сразу остановим загрузку. Проверки window.addEventListener или некоторых известных User Agent (старый Android браузер, Opera Mini и тому подобное) будет достаточно.
Иногда localStorage может быть недоступен, несмотря на поддержку браузером WOFF-шрифтов. На этот случай я делаю запасной вариант.
Затем мы проверяем, был ли шрифт сохранён в localStorage. Если был, загружаем его немедленно.
Если шрифт не был загружен ранее, получаем его Ajax-запросом. Но перед этим проверяем поддержку WOFF2.
Затем сохраняем данные в localStorage и добавляем CSS-код в элемент <style> .

Давайте взглянем на скрипт

Скрипт и несколько Grunt-задач по минификации доступны по ссылке bdadam / OptimizedWebfontLoading. Также вы найдёте там демонстрации.

Где разместить скрипт

Скрипт должен находиться в <head> разделе вашей страницы над всеми объявлениями стилей, так, чтобы это не блокировало отрисовку страницы (браузер не должен ждать, пока CSSOM станет готова).

Что происходит, когда localStorage недоступен?

Запасной шрифт

Я считаю, что достаточно подключать веб-шрифты лишь для тех браузеров, которые поддерживают WOFF или WOFF2 форматы. Это примерно 90% всех пользователей в мире. Другие браузеры должны получать текст, отрисованный запасным шрифтом.

Пользователи со старыми браузерами будут благодарны за то, что мы не тратим их ограниченные ресурсы (ЦПУ, память) на развлекательные нужды.

Демонстрация

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

Сравнение

Первое посещение было просто-напросто одинаковым для решений с localStorage и асинхронным CSS. Оба сначала отрисовали текст запасным шрифтом, затем переключились на веб-шрифт, вызвав мерцание в первый раз. Загрузка шрифтов из внешних файлов привела к невидимости текста до тех пор, пока шрифты не были загружены. Это затормозило отрисовку на 0.6 секунды.

№ 1 и № 2 лидируют.

Сравнения от второго посещения также показывают некоторые различия между localStorage и асинхронным CSS. Мы можем ясно видеть, что загрузка из localStorage не вызывает никакой перерисовки. Как только HTML загружен, страница отрисовывается немедленно.

Метод асинхронного CSS отрисовывает страницу с базовым шрифтом, а затем перерисовывает с веб-шрифтом. Это вызывает мерцание для пользователя при каждой загрузке страницы.

C учётом этого, № 1 — победитель.

Скриншоты, чтобы показать эти отличия:

Асинхронная загрузка CSS с использованием localStorage. Нет перерисовки. Асинхронная загрузка CSS без использования localStorage. Видна перерисовка. Внешняя загрузка шрифтов. Отрисовка останавливается, пока шрифты не загрузятся.

Материалы

Обновление

Как посоветовал @CrocoDillon, я добавил третий (необязательный) аргумент к new FontFace(. . <>) при проверке поддержки WOFF2. Иначе некоторые браузеры выдают ошибки (Chrome 35 и 36, Opera 22 и 23). Посмотрите внимательней на пулреквест.

Если не вникать в подробности, по быстрому подключить шрифт можно так:

Такой метод вполне работает в большинстве браузеров, но неверен. В данном примере упущено:

Нет названия шрифта в свойстве local .
Подключен только один формат шрифта.
Неправильно настроены начертания.

Локальные шрифты

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

Можно указать несколько названий:

Форматы шрифтов

Сегодня используются четыре формата, рассмотрим их подробнее:

TTF/OTF – работают в большинстве браузеров, кроме IE.

EOT – создан Microsoft, представляет сжатую копию шрифта TTF, поддерживается только в IE.

WOFF – формат представляет собой сжатый шрифт в формате TTF/OTF.

WOFF2 – имеет улучшенное сжатие, по сравнению с первой версией.

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

WOFF2 для современных браузеров.
WOFF для браузеров, которые не поддерживают WOFF2.
TTF для устаревших браузерах
EOT для поддержки IE.

Разные начертания шрифтов

Пример подключения шрифта «Crimson Text» в разных начертаниях:

Вы можете перевести ttf изображения в woff и во множество других форматов с помощью бесплатного онлайн конвертера.

Как сконвертировать ttf в woff?

Загрузите ttf-файл

Выберите файл, который вы хотите конвертировать с компьютера, Google Диска, Dropbox или перетащите его на страницу.

Выберите «в woff»

Выберите woff или любой другой формат, в который вы хотите конвертировать файл (более 200 поддерживаемых форматов)

Скачайте ваш woff файл

Подождите пока ваш файл сконвертируется и нажмите скачать woff-файл

Бесплатное онлайн преобразование ttf в woff

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

Мы удаляем загруженные файлы ttf мгновенно и преобразованные woff файлы через 24 часа. Все файлы передаются с использованием продвинутого шифрования SSL.

Вам не нужно устанавливать какое-либо программное обеспечение. Все преобразования ttf в woff происходят в облаке и не используют какие-либо ресурсы вашего компьютера.

TrueType Font

Формат шрифта TrueType был создан в 1989 году Apple. Это сделано с высоким уровнем управления отображением шрифта до пикселя. Он легко масштабируется из-за векторного формата. Таким образом, TrueType шрифт используется в различных ОС (Microsoft, Apple и др.).

Он был создан в 1990-х годах с четырьмя типами шрифтов; Helvetica, Courier, Pi и Times New Roman. Этот формат шрифта был создан для использования в продуктах Mac, чтобы конкурировать с шрифтами Type 1, присутствующими в Adobe PostScript. Благодаря этому пользователи могут контролировать, как текст будет отображаться на экране компьютера и на распечатанной странице. Adobe хотели сделать его доступным для пользователей, но Apple лицензировала TTF для использования в продуктах Microsoft, не дав контролировать Adobe собственные шрифты.

Форматы шрифтов TrueType и OpenType используют этот формат файла, а также аналоговое сжатие, применяемое в технологии хранения, которая функционирует для генерации изображений из модели. Независимые метаданные могут быть сохранены с помощью этого формата файла с информацией о шрифте. Этот формат файла используется с 2010 года, и его основной целью является хранение и передача шрифтов, существующих в интернете. Был разработан Mozilla foundation.

Основная функция формата WOFF - это объединение шрифтов, связанных с документами в интернете. Программы, поддерживающие этот формат файла для связанных шрифтов, должны следовать необходимым рекомендациям спецификации шрифтов CSS3. Такие связанные шрифты доступны для документов, которые ссылаются на них, и поэтому их доступность не должна распространяться на другие приложения или документы в системе пользователя. Есть сходство в том, как структурированы файлы WOFF и шрифты sfnt.

Во-первых, выберите ttf файл, который вы хотите конвертировать или перетащить его. Во-вторых, выберите woff или любой другой формат, в который вы хотите преобразовать файл. Затем нажмите кнопку конвертировать и подождите, пока файл не преобразуется

⏳ Как долго я должен ждать, чтобы преобразовать ttf в woff?

Преобразование Изображение обычно занимает несколько секунд. Вы преобразовать ttf в woff очень быстро.

🛡️ Это безопасно конвертировать ttf в woff на OnlineConvertFree?

Конечно! Мы удалить загруженные и преобразованные файлы, так что никто не имеет доступ к вашей информации. Все типы преобразования на OnlineConvertFree (в том числе ttf в woff) 100% безопасны.

📱 Можно ли преобразовать ttf в woff без установки программного обеспечения?

Да! OnlineConvertFree не требует установки. Вы можете конвертировать любые файлы (в том числе ttf в woff) онлайн на вашем компьютере или мобильном телефоне.

Читайте также: