Как подключить шрифт к сайту

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

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

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

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

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

p{
  font-family: Malahit;
}

ДЕМО

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

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

Как подключить Google шрифт к сайту

Подключить Гугл шрифты к сайту тоже не сложно. Для этого идем на Гугл фонтс и выбираем нужный шрифт. Копируем ссылку на него и вставляем на свой сайт в head.

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

Добавить страницу в закладки

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

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

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