О web-безопасных шрифтах

[evgelit]

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

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

Оговорюсь что это большая часть этих шрифтов является собственностью Мелкомягких и отображаются на любом браузере под виндой (Linux системы благополучно не имеют их и требуют дополнительной установки).
И до сих пор даже в серьезных ВУЗах продолжают рассказывать о возможности использования только 9ти шрифтов в веб разработке. Ладно я еще понимаю так говорить школьникам на информатике, это проще чем за очень небольшое время толково объяснить синтаксис CSS и принципы нормальной верстки, но даже в довольно солидном техническом универе мне семестр рассказывали это как непреложную истину.
А все на самом деле проще. Еще в начале 90х была разработана возможность подключать свои шрифты на сайт методом правила @font-face. В наши дни все упрощено до такой степени что достаточно открыть один из кучи сервисов @font-face генерации (например http://www.fontsquirrel.com), загрузить шрифты, настроит выходные данные и получить готовый код.

Вот так вот, например, выглядит результат вставляемого в СSS шрифта Hagin Caps Thin:

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

После этого можно использовать шрифт так же как и любой стандартный, указывая его в классе или ID.
А вот так он выглядит на самом сайте