Почему не подключать только две форматы шрифтов на странице?

Question

[Вазген Алексанян]

Смотрю в Can I Use и все норм если я подключу только woff и svg.
Зачем подключать еще другие форматы?

Comments

[Одиночка Айс]

для старых версий браузеров, для ie

[Вазген Алексанян]

Одиночка Айс, ie поддерживает и woff и svg от 9 версии. по мнению can i use

[Rustam Bainazarov]

Вазген Алексанян, зачем шрифты в SVG подключать?

Их поддержку выпилили из Chrome уже несколько лет как. А поддержка в одном-единственном Safari держится по инерции.

SVG-шрифты будут работать только в Safari, короче.

Почему от SVG-шрифтов все отказались? Да очень просто: они не поддерживают лигатуры и кёрнинг.

Для браузеров от IE9 и выше вам (включая все современные) нужно только два типа: WOFF и WOFF2. Опционально можете ETF добавить, но не обязательно (это для нивеливания бага в IE10/11, когда WOFF-файл не грузился).

[Rustam Bainazarov]

Вазген Алексанян, а IE, кстати, вообще никогда не поддерживал шрифты в SVG, вы не то смотрите:
https://caniuse.com/#search=SVG%20font

[Вазген Алексанян]

Рустам Байназаров, Значит другие форматы не поддерживает Safari? только svg?

[Вазген Алексанян]

Рустам Байназаров, Я svg не для ie подключаю. зачем? если и woff там держится

[Rustam Bainazarov]

Вазген Алексанян,

Значит другие форматы не поддерживает Safari? только svg?

С какого бока?.. вы умеете пользоваться Caniuse.com? Safari поддерживает шрифты в ETF, OTF, WOFF, WOFF2 и SVG.

Я о том, что SVG-шрифты вообще не нужны никому и никогда. Это устаревшая технология (как OTF и ETF для веба).

[Вазген Алексанян]

Рустам Байназаров, да походу я svg криво смотрел, он видать вообще не нужен. тогда стоит только woff и подключать

[Rustam Bainazarov]

Вазген Алексанян, WOFF (для всех, включая старые) и WOFF2 (для современных браузеров).

WOFF2 меньше весит, там меньше ненужной информации + он изначально в сжатом виде. Это самый современный формат.

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

[Вазген Алексанян]

Рустам Байназаров, woff2 - это типа хорошое качество у шрифтов?

[Rustam Bainazarov]

Вазген Алексанян, что значит «хорошее»? Шрифт векторный. У него не может быть плохого или хорошего качества.

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

Информация в шрифте, поверьте, не только о форме букв и т. п. содержится. Только далеко не всё оттуда надо в веб.

[Вазген Алексанян]

Рустам Байназаров, значит спасибо тебе большое.

[Вазген Алексанян]

Рустам Байназаров, напиши как ответ, чтобы отметить как решение

[Rustam Bainazarov]

Вазген Алексанян, тогда пометьте оба ответа как решение. Человек ибо тоже верно написал.

Answer 1

[WhiteBearDev]

Форматы необходимы для поддержки старых браузеров:

eot - для IE ниже 8;
ttf - для старых браузеров, что важно, старых мобильных браузеров в том числе;
svg - аналогично с ttf;

Для современных браузеров достаточно woff или woff2, как более продвинутую версию

Comments

[Вазген Алексанян]

Значит все верно делаю. ie ниже 9 не поддерживаю, конечно. а ttf и woff особой разницы нету в плане старых браузеров в том числе и мобильных.
спасибо

[ProjectSoft]

Вазген Алексанян, если вам дали исчерпывающий ответ - отметьте его решением.

Answer 2

[Rustam Bainazarov]

Для браузеров от IE9 и выше вам (включая все современные) нужно только два типа: WOFF и WOFF2.

Про ETF
Опционально можете ETF добавить, но не обязательно (это для нивелирования бага в IE10/11, когда WOFF-файл не грузился).

Это полноценный файл со всей информацией по шрифту. Обычно в этом формате (или OTF) шрифты используются в ОС. Много весит.

Про SVG
SVG-шрифты вообще не нужны никому и никогда. Это устаревшая технология (как OTF и ETF для веба).

Их поддержку выпилили из Chrome уже несколько лет как. А поддержка в одном-единственном Safari держится по инерции.

Почему от SVG-шрифтов все отказались? Да очень просто: они не поддерживают лигатуры и кёрнинг. Они много весят и нагружают рендеринг, хоть и имеют более стандартизированный внешний вид на разных ОС и в разных браузерах.

Про WOFF
Первый нормальный формат шрифтов именно для web: весит сильно меньше ETF и т. п. + поддерживает все нужные технологии. Поддержка данного формата — широчайшая в браузерах, включая старые (IE9+). Обязателен к применению.

Про WOFF2
Развитие идей WOFF, при этом весит меньше него: там меньше ненужной информации + он изначально в сжатом виде. Это самый современный формат. Поддержка очень хорошая, но хуже, чем у WOFF, поэтому эти два формата нужно использовать вместе.

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