Добавить на сайт нестандартный шрифт css

Ох уж эти дизайнеры... Нарисуют так, что не знаешь с какой стороны подойти к макету.

Бывает, складывается такая ситуация, что используется шрифт, который может отсутствовать у пользователя. Но мы же делаем сайты так, чтобы они одинаково отображались у максимального количества пользователей. А значит, что нам надо подключить этот нестандартный шрифт к сайту и, если его нет у пользователя, загрузить на компьютер. В этом нам поможет css.

@font-face {
	font-family: Chunk;
	src: url('ChunkFive.ttf') format('truetype');
}

Вот он, синтаксис подключения шрифта.

• font-family: Chunk; - это имя нашего шрифта (можно задавать любое, главное сами запомните)
• url('ChunkFive.ttf') - это пусть к файлу шрифта (можно также подгружать с других сайтов)
• format('truetype') - формат шрифта

Чтобы задать подгруженный нами шрифт, достаточно написать следующий код:

h2.chunk {font-family: Chunk, sans-serif;}

И теперь все заголовки 2 уровня с классом .chunk будут написаны шрифтом ChunkFive, который мы назвали Chunk.

Если же нам требуется добавить какое-либо специальное начертание, например курсивное (и у нас есть соответствующий шрифт), то его тоже придется объявить и добавить дополнительное правило:

@font-face {
	font-family: Chunk;
	src: url('ChunkFive.ttf') format('truetype');
}
@font-face {
	font-family: Chunk;
	font-style:italic;
	src: url('ChunkFive_Italic.ttf') format('truetype');
}

• font-style:italic; - нужное нам начертание

И теперь создадим 2 заголовка: один с обычным начертанием, а второй с курсивом. В стилях запишем:

h2.chunk {font-family: Chunk, sans-serif;}

И код вывода заголовков:

<h2 class="chunk">Заголовок с обычным начертанием</h2>
<h2 class="chunk"><em>Заголовок с курсивным начертанием</em></h2>

Обновлено 12.07.2015

Формат ttf поддерживается большинством современных браузеров, но не всеми. Чтобы исправить этот недочет, нужно сначала "сгенерировать" пакет шрифтов, например, через сервис, описанный ранее, и только потом подключать готовый набор шрифтов на сайт с помощью примерно следующего кода:

font-face {
   font-family: Chunk;
	src: url('ChunkFive.eot');
	src: url('ChunkFive.eot?#iefix') format('embedded-opentype'),
		url('ChunkFive.woff2') format('woff2'),
		url('ChunkFive.woff') format('woff'),
		url('ChunkFive.ttf')  format('truetype'),
		url('ChunkFive.svg#svgFontName') format('svg');
}