Как уменьшить вес шрифтов при верстке?

Question

[Lici]

Как уменьшить вес шрифтов при верстке? Тех, что кидаю в папку font. Пару шрифтов уже мегабайт.

@font-face {font-family: Calibri; src: url(fonts/Calibri.ttf);}
@font-face {font-family: Calibri Bold; src: url(font/Calibri_Bold.ttf);}

Answer 1

[Дима Паутов]

Все зависит как вы их подключаете!
Есть несколько факторов:
1) Кроссбраузерность. Сейчас, для современных браузеров достаточно всего лишь пару форматов. Гугл дает свои шрифты именно так. Там всего пару форматов. (Но по непонятной мне причине, я их там не подключаю. Ну не нравится мне)
2) Каким генератором вы пользуетесь? www.fontsquirrel.com/tools/webfont-generator - дает кучу возможностей для настройки. Чем больше настроек, тем больше вес шрифта. Так же есть режимы для сжатия веса.
3) Кол-во начертаний. Жирный, курсив, лайт и т.д. Чем их больше, тем тяжелее сайт.

Answer 2

[Константин Омелян]

Используй гугловские шрифты.

Comments

[Денис Инешин]

Ну нет, где тут оптимизация? Оптимизация это у fontsquirrel, когда четко настраиваешь шрифт под свои нужды.

Answer 3

[Радость моя]

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

Comments

[Иван Доброславин]

А как работать с fontsquirrel.com? Не разобрался, где убирать не нужные глифты?

[Радость моя]

Иван Доброславин, столько лет прошло с тех пор...

насколько я помню я это делал так:

1. скачивал нужный мне шрифт
2. загружал его обратно через https://www.fontsquirrel.com/tools/webfont-generator убирая лишнее, и скачивал подготовленный набор.

[vvanyazz]

Радость моя, там же нету русского )

Answer 4

[Игорь Воротнёв]

1. Кидать обычные ttf в папку - это вообще совсем неправильно. Это десктоп-версии шрифтов, они тяжелые.
2. Необходимо использовать генератор webfonts, FontSquirrel - отличный вариант. Генерить только необходимые языки и символы, вырезать метаданные.
3. Если нужна поддержка IE9+ (ну и все нормальные браузеры) - генерируйте только woff (см. поддержку). Это самый легкий формат.
4. Если нужна поддержка IE8 и ниже - придется использовать EOT-формат.

или использовать Google Fonts, который все это дело позволяет тоже настроить. К тому же, есть 2 бонуса:
1. Это запросы на внешний домен, значит во время загрузки страницы свой файлы будут быстрее грузиться (загрузка будет идти параллельно с двух доменов)
2. У многих пользователей шрифты уже будут в кеше.

Comments

[Игорь Воротнёв]

@Aingis в целом соглашусь. Есть нюансы, но холиварить давайте не будем) Что однозначно - если страница и так тянет тучу файлов (например увесистый новостной портал, главная страница), то минусы Google Fonts будут нивелированы. Кроме того, можно использовать их яваскриптовый font loader, который эти же минусы тоже устраняет чуть более чем полностью. По поводу кеша - это конечно не та штука, на которую следует рассчитывать, это просто приятный бонус.