Подключение шрифта к странице: как нужно делать сейчас

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

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

@font-face {
  font-family: 'Web font';
  src: url('webfont.woff2') format('woff2'),
       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).