Нестандартные шрифты на сайте с помощью CSS

Благодаря одному умному и профессиональному дизайнеру, я попался в ловушку. Макет нарисован и согласован. Клиент дотошный. И конечно благодаря дизайнеру, на макете появился нестандартный шрифт. Клиент рвет и мечет, нужно проект закрывать. Как же выйти в данной ситуации победителем?

И так, начнем конечно со спецификации CSS. Она сама здесь. Нам нужно только "Font Descriptions and @font-face"

Описание шрифта обеспечивает мост между спецификацией шрифта автора и данными шрифта, которые являются данными, должен был отформатировать текст и отдавать абстрактных глифов, к которым характеры наносят на карту - фактические масштабируемые схемы или битовые массивы. На шрифты ссылаются свойства таблицы стилей. Описание шрифта добавлено к базе данных шрифта и затем используется, чтобы выбрать соответствующие данные шрифта. Описание шрифта содержит описатели, такие как местоположение данных шрифта по Сети, и характеристики тех данных шрифта. Описатели шрифта также необходимы, чтобы соответствовать свойствам шрифта таблицы стилей к специфическим данным шрифта. Уровень деталей описания шрифта может измениться с только названия шрифта до списка ширин глифа.

Т.е. в нашем случае надо подгрузить шрифт и подружить с ним браузер. Для этого есть следующая спецификация

Описатели шрифта могут быть классифицированы в три типа:

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

Все описания шрифта определены через @font-face в правиле. Общая форма:

@font-face {<описание шрифта>}

Разберем пример из спецификации.

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Font test</TITLE> <STYLE TYPE="text/css" MEDIA="screen, print"> @font-face {font-family: "Robson Celtic"; src: url("http://site/fonts/rob-celt") } H1 { font-family: "Robson Celtic", serif } </STYLE> </HEAD> <BODY> <H1> This heading is displayed using Robson Celtic</H1> </BODY> </HTML>

Тут все просто.

font-family: "Robson Celtic" - полное название шрифта.Его можно узнать с помощью программ по работе со шрифтами. И браузер конечно надо научить его искать. Для этого прописываем название шрифта в данной спецификации.