Нестандартные шрифты в HTML 5 и CSS 3

Недавно передо мной встала задача, сделать заголовки и подзаголовки нестандартным шрифтом PentaDemi. Но текст нужно было сделать именно текстом. И немного поискав я нашел очень хороший и рабочий способ во всех браузерах. Этим способом и делюсь.

Основу использования нестандартного шрифта составляет такой код CSS:

@font-face {
  font-family: 'PentaDemi';
  src: url('font/PentaDemi.eot');
  src: local('PentaDemi'),
       url('font/PentaDemi.woff') format('woff'),
       url('font/PentaDemi.ttf') format('truetype'),
       url('font/PentaDemi.svg#PentaDemi-Regular') format('svg');
}

Этим кодом я создаю новый шрифт под названием PentaDemi. В дальнейшем мы сможем использовать это название в параметрах font для любого элемента страницы. В коде непосредственно подключаются внешние файлы шрифта в четырёх форматах, расположенные в папке font/. Это нужно для того, чтобы все браузеры корректно поняли, какой именно шрифт нужно использовать.

Также, кроме файлов со шрифтами из папки font/, мы указали директиву local. Преимущество такого подхода в том, что браузер не будет подгружать внешние файлы, если такой шрифт уже установлен на компьютере пользователя.

 

Быстрая конвертация шрифтов

Быстро преобразовать шрифт в нужный формат можно при помощи отличного сервиса Online Font Converter.

Если Вам не понравится можно загуглить и множество других, но менее приятных и понятных :-)