Как грамотно подключить шрифты?
Ты когда прописываешь @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;
}
Я использую такое подключение шрифтов.@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;
}
Кроме этого при конвертации шрифтов на белке выбираю конкретно какой язык должен поддерживаться шрифтом, это помогает уменьшить вес файла шрифта и соответственно скорость загрузки шрифта на веб-страницу.