Использование нестандартных шрифтов для оформления текста блога

Если вы пробовали уже разобраться, что же там написано в файле style.css, то наверняка обратили внимание на то, что шрифты чаще всего указываются не по-отдельности, а целыми семьями – font-family. В веб-дизайне все стандартные шрифты условно поделены на несколько семей. Это дает возможность браузеру самостоятельно определять, какой шрифт использовать для отображения текста, исходя из того, к какому семейству он относится. Для чего то сделано?

Все элементарно: в каждой операционной системе имеется свой набор установленных шрифтов, и эти шрифты могут не совпадать. Например, в Windows есть шрифты, которых нет в Linux, и наоборот. Если указать какой-то конкретный шрифт, используемый в Windows, например, Segoe UI Light, то еще не факт, что этот шрифт есть в Ubuntu. Поэтому может получиться так, что браузер не сможет определить, каким шрифтом отображать текст, и выведет вместо него какие-нибудь квадратики. Чтобы такого не получилось, все шрифты условно разделили на несколько семейств:

• serif
• sans-serif
• cursive
• fantasy
• monospace

Например, к семейству шрифтов sans-serif относятся:

• Garamond
• Georgia
• New York
• Times
• Times New Roman

Один из этих шрифтов встречается во всех операционных системах, поэтому использование семейства шрифтов sans-serif гарантирует, что текст во всех операционных системах будет отображен более-менее правильно и будет иметь похожий вид (классический шрифт без засечек).

Однако сейчас, в эпоху разнообразия и нестандартных подходов, все больше веб-мастеров применяют не классические варианты шрифтов. Есть несколько способов, обеспечивающих совместимость шрифтов в разных операционных системах. Одним из них является jQuery-скрипт Cufon, другим – использование Google Web Fonts. Но, благодаря все более широкому применению разметки HTML5, есть и третий способ – внедрение вообще любых пользовательских шрифтов.

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

01 Для этого закачайте его в блог в доступную папку, например, fonts.

02 Внедрите в файл style.css этот шрифт:

@font-face{
font-family:somefont;
src:url('/www/wp-content/themes/папка-вашей-темы/fonts/somefont.ttf') format ("truetype");
}

03 После этого можете использовать шрифт somefont для выделения определенного текста. Например, для заголовков H1:

h1 {font-family:somefont;}