Серёжа Сыроежкин
Серёжа СыроежкинКопирайтер
1.06.2015

Шрифты CSS

Шрифты на сайте являются одним из основных факторов, отвечающих за качество и степень восприятия представленной на сайте информации. Всем известно, что стандартная коллекция шрифтов довольно скудна и скучна, поэтому очень часто становится необходимым использование сторонних шрифтов. Также шрифты HTML помогают в создании собственного стиля компании.

Достаточно богатую коллекцию шрифтов имеет сервис Google Fonts. Также с помощью него довольно просто подключить шрифт к себе на сайт.

Существует 2 основных способа, как подключить шрифт к сайту:

  • С помощью HTML:

    Между тегами <head></head> необходимо вставить строку следующего содержания:

    <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

    Здесь в качестве значения атрибута href указывается ссылка на шрифт в Google Fonts.

  • С помощью CSS:

    В Css используется функция @import для того, чтобы осуществить подключение шрифта к сайту.

    @import url(http://fonts.googleapis.com/css?family=Ubuntu);

Также сторонние шрифты можно подключить с помощью JavaScript, но ввиду малой актуальности данного метода мы его здесь приводить не будем.

После подключения нужного шрифта мы сможем его использовать следующим образом:

h1 { font-family: ‘Ubuntu’, Arial, serif; color: #fa8e47; font-weight: 400; }

Здесь шрифт Ubuntu применяется к тегу H1 (Название шрифта указывается в свойстве font family.) и цвет шрифта устанавливается с помощью тега color.

При использовании шрифтов от Google необходимо помнить, что отображение нужного шрифта может не поддерживаться в некоторых браузерах (кроме Google Chrome).

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