Как загрузить шрифт в CSS.

Как использовать внешний шрифт.

Каждому веб-мастеру хочется чтобы его сайт выглядел по особеному, частично эту проблему можно решить методом загрузки каких-то эксклюзивных шрифтов, но они на то и эксклюзивны, что установленны только у единичных пользователей, все остальные вашу красоту не увидят если только вы этот шрифт не выложили у себя на сервере.
Все пользовательские агенты можно разделить на 3 категории:
1) Неподдерживающих CSS.
2)Поддеривающих CSS-1, но не поддерживающих CSS-2 и CSS-3
3)Поддеривающих CSS-1, CSS-2 и CSS-3
Теперь начнем разбираться, загрузка шрифта в каскадных таблицах стилей началась в CSS-1 методом local, т.е. { src: lokal(шрифт);}, если имя шрифта имеет пробелы то такие инена нужно помещать в кавычки { src: lokal("Имя Шрифта");}
В CSS-2 и CSS-3 методы изменились на { src: url("Имя Шрифта");}, что позволило вылаживать свои шрифты выкладывать на сервер и уже потом его использовать в веб-страницах.

Чтобы использовать внешние шрифты нужно проделать два шага:
1)загрузить шрифт браузером:
@font-face {
font-family:"VivaldiD";
src: lokal("C/windows/font/VivaldiD.ttf"), url("VivaldiD.ttf")
format("truetype");
}
для загрузки шрифта нужно использовать АТ-правлило (@font-face), в конструкции которого нужно определить имя шрифта font-family:, потом при помощи дескриптора src: указать путь локального расположения шрифта, для П.А. поддерживающих только CSS-1, а потом через запятую указать путь для браузеров поддерживающих CSS-2 и CSS-3 и при необходимости указывается формат(format) шрифта.
Для CSS-2 и CSS-3 путь может быть как абсолютным так и относительным. По поводу форматов значения зависят от расширения файла шрифта, мой пример имеет расширение ttf, т.е. TrueTypeFont, значит его формат truetype, есть и другие расширения, а занчит и другие форматы. Задавать формат не обязательно, но есть ситуации когда в пути к шрифту не указывается расширение, тогда формат играет одну из ключевых ролей.
Если в имени файла(шрифта) есть пробелы и даже если путь помещен в кавычках, то браузер InternetExplore его не загружает, можно конечно переименовать шрифт но каким это боком вылезет остается только догадываться.
2)Прописать шрифт нужному элементу, т.е. установить шрифт при помощи font-family: нужному селектору:
BODY{font-family:VivaldiD, serif;}
На тот случай если шрифт не удалось загрузить нужно указать его категорию в моем примере serif.
3)При загрузке шрифта нужно указывать типы носителей для которых написаны правила, например загружать шрифты нужно визуальным браузерам(screen) или принтерам(print), а для невизуальных(например звуковых браузеров) бесполезно, вот для этих целей тегу STYLE присваивается атрибут MEDIA принимающего в качестве значний один или список типов носителей.

Полный код для загрузки шрифтов:
<STYLE type="text/css" MEDIA="screen, print">
@font-face {
font-family:"VivaldiD";
src: lokal("C/windows/font/VivaldiD.ttf"), url("VivaldiD.ttf")
format("truetype");
}
BODY{font-family:VivaldiD, serif;}
</STYLE>