Подключаем свой шрифт к сайту

Март 13, 2013   Александр Маврин   2 комментария

Шрифт для сайтаДоброго здравия, уважаемые читатели. Рассмотрим вариант подключения шрифтов к сайту через CSS. Но для начала немного о том, для чего это нужно. Собственные, дизайнерские шрифты применяются на сайте конечно же для индивидуальности. Чтобы как-то выделить свой сайт, тем самым повышая интерес у новых посетителей. Всегда приятно заходить на сайт, который хорошо оформлен и имеет красивый дизайн. Красивые дизайнерские шрифты относятся скорее к категории дизайна, тем более, что в основном их применение ограничено только небольшими фразами, типа заголовков или специальных страниц. В основном же контенте, как правило, используются вполне себе обычные шрифты.

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

@font-face{
  font-family: Malahit; /* Название шрифта */
  src: url(Malahit.ttf); /* Путь до файла шрифтов */
}

И, соответственно к элементу подключить этот шрифт таким образом:

p{
  font-family: Malahit;
}

ДЕМО

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

Если у вас браузер Internet Explorer версии 7 или 8, то никаких изменений вы не увидите. Рекомендуется обновить браузер до последней версии.

Если что-то непонятно, пишите в комментариях, разберемся вместе. Читайте так же про Glyphicon.

Не стесняйтесь делиться записью в социальных сетях. Спасибо


2 комментария
  1. У Google есть очень хороший инструмент для подключения шрифтов к сайту. Там довольно простой и понятный интерфейс, жаль что только кириличных шрифтов мало.
    http://www.google.com/webfonts

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *