Нестандартные шрифты на сайте font, html, css

Работая над одним из проектов столкнулся с требованием заказчика по нестандартному шрифту на сайте. Переубеждать клиента небыло смысла, т.к. шрифт органично вписывался в макет, к тому же использовался только для заголовков и некоторых типов меню что и делало его неотьемлемой частью дизайна сайта. Но как? Если клиент загружает веб страницу то он видит только те шрифты которые установлены на клиентской машине и поддержуются браузером О_о. Но так было раньше. Как выяснилось сейчас существует несколько способов задания нестандартных шрифтов на сайте - при помощи Google web fonts и свойства css @font-face. Ок, сказал я, посмотрим…Рассмотрим первый вариант - задание нестандартного шрифта на сайте при помощи Google web fonts. Это пожалуй лучший вариант в плане простоты и надежности, но к сожалению он уступает в гибкости второму. На момент написания статьи доступны 444 абсолютно свободных шрифтов, и этого было бы достаточно если вы делаете англоязычный сайт. Кириллических шрифтов намного меньше, сейчас их 28 :(  Для начала перейдем на сайт Google web fonts и выберем себе шрифт по вкусу, если нужна кириллица - используем соответствующий фильтр.

Далее жмем Quick-use и следуем инструкциям на экране. А именно:

• Первый, второй шаг позволяет выбрать стили которые мы будем использовать на нашем сайте
• Третий шаг это подключение шрифта не веб страницу. Это обычный линк на CSS файл который находится у Гугла. Я подключил код в файле header.php моего шаблона. Там уже значился стиль шаблона по умолчанию, сразу под ним и расположил данный код.
• Теперь можно внести изменения в наши файлы стилей

Проще не придумаешь :) Переходим к способу №2 Моей жене очень нравится шрифт Aquarelle, именно над ним я и буду проводить эксперимент. Сразу оговорюсь, что для практического приминения в вебе, данный фонт совершенно не пригоден, он отлично смотрится где угодно только не на веб странице, тем не менее для примера он нам подойдет. Для этого скачаем сам шрифт и на основе его получим модификации с разными расширениями при помощи онлайн сервиса. Нам понадобятся .eot .woff  .svg ну и конечно же сам .ttf чтобы все браузеры смогли его отобразить. Сохраняем в одну папку на сервере. Туда же положим файл CSS:

@font-face {
    font-family: 'Aquarelle';
    src: url('Aquarelle.eot');
    src: url('Aquarelle.eot?#iefix') format('embedded-opentype'),
         url('Aquarelle.woff') format('woff'),
         url('Aquarelle.ttf') format('truetype'),
         url('Aquarelle.svg#Aquarelle') format('svg');
    font-weight: normal;
    font-style: normal;
}

Подключим его в файл шаблона:

<link href="<?php bloginfo('stylesheet_directory'); ?>/Aquarelle/stylesheet.css" media="screen" pre="" rel="stylesheet" type="text/css" />

Все! Подключаем, прописуем в CSS подключенный шрифт и вуаля! Есть еще один способ - javascript библиотека Cufon. Описание есть в интернете.