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

В проектах часто стоит задача подключить какой-либо шрифт. В данной заметке примеры того как нужно сейчас подключать шрифты в современных браузерах.

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

@font-face { 
  font-family: 'SomeFont';
  font-style: normal; 
  font-weight: normal;
  src: url('somefont.woff2') format('woff2'), 
       url('somefont.ttf')  format('truetype'), /* Старые Safari, Android, iOS (если не нужно, то убираем .ttf) */ 
       url('somefont.woff') format('woff'); 
}

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

Можно столкнуться с ситуацией, когда нужно использовать разные начертания одного и того-же шрифта, но в CSS не хочется искать и прописывать каждый раз свое название. Выход есть - подключать файлы шрифтов, применяя одно название font-family, а переключаться между шрифтами с помощью font-weight:

@font-face { 
  font-family: 'SomeFont';
  font-style: normal; 
  font-weight: 300;
  src: url('somefont_light.woff2') format('woff2'), 
       url('somefont_light.ttf')  format('truetype'), /* Старые Safari, Android, iOS (если не нужно, то убираем .ttf) */ 
       url('somefont_light.woff') format('woff'); 
}

@font-face { 
  font-family: 'SomeFont';
  font-style: normal; 
  font-weight: 500;
  src: url('somefont_medium.woff2') format('woff2'), 
       url('somefont_medium.ttf')  format('truetype'), /* Старые Safari, Android, iOS (если не нужно, то убираем .ttf) */ 
       url('somefont_medium.woff') format('woff'); 
}

@font-face { 
  font-family: 'SomeFont';
  font-style: normal; 
  font-weight: 700;
  src: url('somefont_bold.woff2') format('woff2'), 
       url('somefont_bold.ttf')  format('truetype'), /* Старые Safari, Android, iOS (если не нужно, то убираем .ttf) */ 
       url('somefont_bold.woff') format('woff'); 
}

В последствии указываем разные плотности и у нас разные шрифты. Значения для разных плотностей, указаны ниже. Помогает не запутыватся.

Плотности шрифта от 100 до 900

100 - Thin

200 - Extra Light (Ultra Light)

300 - Light

400 - Normal

500 - Medium

600 - Semi Bold (Demi Bold)

700 - Bold

800 - Extra Bold (Ultra Bold)

900 - Black (Heavy)

Как подключать шрифты для старых браузеров

Сейчас уже такое подключение не актуально, но по прежнему можно встретить на сайтах.

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

Полезные сервисы для шрифтов

google-webfonts-helper - даст скачать шрифты из google fonts и покажет как их лучше всего подключить.

transfonter.org - сервис позволяет создавать набор шрифтов разных форматов, и на выходе выдает как встроить шрифты на сайт. Очень удобно, не нужно подписывать семейство для разных начертаний, он умеет объединять начертания под одним названием шрифта.