Использование нестандартных шрифтов на сайте с помощью CSS

CSS

Часто, мы хотим использовать на нашем сайте нестандартные шрифты в содержании или в заголовке.

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

Подключение нестандартных шрифтов с помощью CSS

Нам нужен шрифт в формате ttf, других я вам не рекомендую. Скачайте этот шрифт для примера, он называется
DS-UncialFunnyHand-Medium.ttf. Установите этот шрифт в папку img, там где лежит ваш сайт, а если вы используете WordPress, то в папку вашей темы.
Откройте файл стилей style.css. Добавьте следующий код в ваш файл style.css. Если вы используете WordPress, тогда файл стилей style.css должен быть текучей темы.

@font-face
{
font-family: DS-UncialFunnyHand-Medium; /* имя шрифта для CSS правил */
src: local(«DS-UncialFunnyHand-Medium»), /* проверяем наличие шрифта в ОС пользователя */
url(img/DS-UncialFunnyHand-Medium.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}

Объясняю.

font-family: DS-UncialFunnyHand-Medium — это имя шрифта для CSS правил.
src: local(«DS-UncialFunnyHand-Medium») — это проверка наличие шрифта на компьютере пользователя
url(img/DS-UncialFunnyHand-Medium.ttf) — если шрифт у пользователя на компьютере не установлен, тогда шрифт будет загружается с сайта по указанному пути .
DS-UncialFunnyHand-Medium.ttf – это название шрифта, а ttf, это его расширение.

Вот и подключили только что вы нестандартный шрифт к вашему сайту. Далее, вы используете этот шрифт как обычно вы использовали для любых текстовых элементов сайта, через CSS.

Например.

h1
{
font-family: DS-UncialFunnyHand-Medium;
}

Все заголовки H1 на вашем сайте будут отображаться шрифтом DS-UncialFunnyHand-Medium. Вы теперь сможете этот шрифт использовать к любому элементу, р, h1- h6 и т.д.

Читайте также:  Позиционирование в CSS: относительное позиционирование, абсолютное позиционирование

С помощью CSS вы сможете быстро использовать нестандартный шрифт на сайте WordPress, HTML или PHP

Можно и таким способом:

<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />

<style type=»text/css»>

@font-face
{
font-family: DS-UncialFunnyHand-Medium; /* имя шрифта для CSS правил */
src: local(«DS-UncialFunnyHand-Medium»), /* проверяем наличие шрифта в ОС пользователя */
url(img/DS-UncialFunnyHand-Medium.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}

h1
{
font-family: DS-UncialFunnyHand-Medium;
}
</style>

<title>Untitled Document</title>
</head>

<body>

<h1>
нестандартный шрифт
</h1>

</body>
</html>

 

Оцените статью
ЗАРАБОТОК В СЕТИ
Добавить комментарий