Часто, мы хотим использовать на нашем сайте нестандартные шрифты в содержании или в заголовке.
Нестандартные шрифты – это такие шрифты, которые не установлены в стандартных настройках операционной системе пользователя.
Можно конечно обойтись на сайте и графикой, но это лишний вес, да и неудобно каждый раз рисовать картинку. В 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 вы сможете быстро использовать нестандартный шрифт на сайте 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>