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

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

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

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

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

p{
  font-family: Malahit;
}

ДЕМО

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

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

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

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