Возможность подключать шрифты к странице — это здорово! Во времена IE8 это еще и было прекрасной возможностью использовать векторную графику для иконок (IE8 поддерживает подключаемые шрифты, но не поддерживает SVG). Появилось много способов сконвертировать шрифт, в том числе, он-лайн-конвертеры, лучший из которых — Font Squirrel. Одна беда: люди просто копируют получаемый из генератора код, ничуть о нём не задумываясь.

Как сейчас нужно подключать шрифты

@font-face { 
font-family: 'Web font';
src: url('webfont.woff2') format('woff2'),
url('webfont.ttf') format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */
url('webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Ибо кроссбраузерность WOFF и кроссбраузерность WOFF2 (на будущее) — позволяют.

Как подключить несколько файлов одного шрифта и использовать одно название шрифта

Нередко, веб-шрифт — это несколько файлов: один файл — одно начертание (файл_1 — плотность 400, нормальный; файл_2 — плотность 400, италик, и так далее). А хочется везде при указании шрифта использовать одно его название, без упоминания в названии слов normal , italic , light и т.п., а указывать это в соответствующих CSS-свойствах.

Подключаем кучу файлов шрифта с указанием одного и того же имени, но разных font-weight и font-style :

@font-face { 
font-family: 'Web font'; /* название одно */
src: url('webfont8321.woff2'); /* разные файлы */
font-weight: 400; /* разная плотность */
font-style: normal;
}

@font-face {
font-family: 'Web font'; /* название одно */
src: url('webfont___1.woff2'); /* разные файлы */
font-weight: 700; /* разная плотность */
font-style: normal;
}

И далее при указании селекторам шрифта и плотности, можно использовать одно имя, но разные плотности.

Как уже неактуально подключать шрифты

Для большинства проектов этот код неактуален, но может потребоваться для всякого говна с кроссбраузерностью IE8+ понимания.

@font-face { 
font-family: 'Web font';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Новейшие браузеры */
url('webfont.woff') format('woff'), /* Новые браузеры и IE9+ */
url('webfont.ttf') format('truetype'), /* Старые Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Древние Safari, iOS, Android */
font-weight: normal;
font-style: normal;
}

Если нужно взять шрифты с Google Fonts, но подключать их со своего хоста

google-webfonts-helper — превосходный сервис, который и шрифты даст скачать, и покажет код как их оптимальнее всего подключать (если забыть о FOUT).