Подключение шрифтов CSS

Использование встроенных шрифтов

p {
    font-family: Verdana, 'Times New Roman', sans-serif;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati facilis quasi ex delectus, consectetur ut quis nisi minus fuga veritatis incidunt maiores optio ipsam accusamus eaque autem eveniet reiciendis. Numquam!

Таблица поддержки шрифтов браузерами

EOT SVG SVGZ TrueType WOFF WOFF2
Google Chrome No No deprecated No deprecated Yes Chrome 4+ Yes Chrome 6+ Yes 43+
Microsoft Edge Yes No No - 12+ partial Yes 12+ No
Internet Explorer Yes IE4+ No No - 9+ partial Yes IE9+ No
Firefox No No No Yes FF3.5+ Yes FF3.6+ Yes 39+
Safari No Yes Yes Yes Safari 3.1+ Yes Safari 5.1+ No
Opera No No deprecated No deprecated Yes 10.1+ Yes Opera 11.10+ Yes 31+
iPhone No Yes No Yes 4.3+ Yes No
iPad No Yes Yes Yes Yes No
Android No No No Yes Android 2.2+ Yes Android 4.4.4+ Yes 44+
Источник

Bulletproof синтаксис подключения шрифтов

@font-face {
  font-family: Open Sans;
  src: url('opensans.eot');
  src: local('Open Sans'), local('OpenSans'),
       url('opensans.eot?#iefix') format('embedded-opentype'),
       url('opensans.woff2') format('woff2'),
       url('opensans.woff') format('woff'),
       url('opensans.ttf')  format('truetype'),
       url('opensans.svg#svgFontName') format('svg');
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati facilis quasi ex delectus, consectetur ut quis nisi minus fuga veritatis incidunt maiores optio ipsam accusamus eaque autem eveniet reiciendis. Numquam!

Подключение шрифтов через CDN на примере Google Fonts

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
Google Fonts

Иконочные шрифты на примере Font Awesome

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<i class="fa fa-graduation-cap" aria-hidden="true">
<i class="fa fa-arrow-right" aria-hidden="true">
<i class="fa fa-code" aria-hidden="true">
Font Awesome