CSS3 предоставляет разработчикам полную свободу при выборе шрифта.

CSS3 Свойство @font-face

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

Когда Вы найдете необходимый шрифт просто разместите его на веб-сервере и подключите его с помощью нового CSS3 свойства @font-face.

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

Обратите внимание: браузеры IE9+, Chrome, Firefox, Opera и Safari поддерживают шрифты в формате .woff (Web Open Font Format - Открытый Формат Шрифтов Всемирной Паутины). Браузеры Chrome, Firefox, Opera и Safari также поддерживают шрифты в формате TTF и OTF, а IE в формате EOT.

Синтаксис:

@font-face {
font-family:opensans; /* Задаем имя шрифта */
src:url('opensans.woff') /* Указываем местонахождение нашего шрифта */
}

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

div
{
font-family:opensans;
}

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

Для этого необходимо дополнительно добавить в @font-face свойство font-style:italic или font-weight:bold и указать путь к шрифту в соответствующем начертании.

/* Подключим курсивную версию шрифта */
@font-face {
font-family:"opensans";
font-style:italic;
src:url('opensans-italic.woff'),;
}

/* Подключим жирную версию шрифта */
@font-face {
font-family:"opensans";
font-style:bold;
src:url('opensans-bold.woff'),;
}