Как грамотно подключить шрифты?

Question

[Дмитрий Петров]

Привет. Вот задумался о том как правильно подключать шрифты исходя из скорости загрузки страницы. Экспериментировал я с набором шрифтов PT Sans который весит около 6мб. Там несколько форматов: .eot, .svg, .ttf и .woff.

Вопрос в следующем: есть ли какой-то способ давать пользователю определенное указание, в зависимости от его браузера, о том какой именно формат скачивать и не скачивать остальные?

Answer 1

[al3ch5]

Ты когда прописываешь @font-face, он уже автоматом выбирает шрифт, который воспримет браузер пользователя. т.е. грамотное использование шрифтов - это грамотное их расположение по порядку(от самого легкого .woff до .svg для OS) . Как пример:

@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icomoon.eot?-cemaup');
  src:url('../fonts/icomoon.eot?#iefix-cemaup') format('embedded-opentype'),
    url('../fonts/icomoon.woff?-cemaup') format('woff'),
    url('../fonts/icomoon.ttf?-cemaup') format('truetype'),
    url('../fonts/icomoon.svg?-cemaup#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

Comments

[Volodimir Babeshko]

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

[Евгений Петров]

Да выкиньте вы уже ttf и svg. Все понимают woff. Ну а для старых ослов eot.

[Евгений Петров]

Лучше бы woff2 включили — тот же fontsquirrel.com его формирует.

Answer 2

[Саша]

Я использую такое подключение шрифтов.

@font-face{
	font-family:'CenturyGothic-Italic';
	src:url('../fonts/CenturyGothic-Italic.woff2') format('woff2'),
		url('../fonts/CenturyGothic-Italic.woff') format('woff'),
		url('../fonts/CenturyGothic-Italic.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}

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

Answer 3

[Павел Сайк]

тут почитать Нестандартные шрифты на сайте с помощью CSS