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

Если Вам нужно воспользоваться каким-нибудь нестандартным шрифтом из внешнего файла, то Вам поможет специальное css-правило @font-face. Рассмотрим эту возможность более детально на примере.

Пример установки нестандартного шрифта для абзаца

Допустим, у нас есть файл majestic.ttf (это файл шрифта).

Нам нужно его установить для абзаца (тега <p>).

Вот пример полного  HTML-кода страницы с абзацем:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

 «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<style type=»text/css»>

 

</style>

  <title>Каталог наших товаров</title>

</head>

<body>

   <p>На данной странице Вы можете узнать более подробно о всех наших товарах.</p>

</body>

</html>

  1. Создаем правило:

@font-face{

   font-family:Majestic;

   src:url(‘majestic.ttf’);

 }

 

В этом правиле с помощью свойства font-face мы задали имя файла подключаемого шрифта, которое будем в дальнейшем использовать, а с помощью свойства src мы задали путь к самому файлу шрифта.

Будьте внимательны при указании пути к файлу!

  1. Создаем правило для нашего абзаца:

      p{

      font-family:Majestic;

      }

В результате получается такой полный HTML-код страницы:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

 «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<style type=»text/css»>

 @font-face{

   font-family:Majestic;

   src:url(‘majestic.ttf’);

 }

 p{

   font-family:Majestic;

 }

</style>

  <title>Каталог наших товаров</title>

</head>

<body>

   <p>На данной странице Вы можете узнать более подробно о всех наших товарах.</p>

</body>

</html>

Результат font-face в браузере

Итак, хотелось бы так же отметить, что не все браузеры поддерживают такую возможность. Поэтому будьте внимательны и не ленитесь проверять результат в разных браузерах.

Успехов!

Запись опубликована в рубрике CSS.
Теги: , , , , , , . Добавьте в закладки постоянную ссылку.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>