109. Как подключить сторонний шрифт в CSS

Чтобы создать неповторимый и красочный дизайн, приходится подключать свои шрифты. В этом уроке научимся подключать любой шрифт. Подключение нового шрифта осуществляется при помощи правила @font-face. В этом правиле, как вы наверно догадались, обязательно должны быть два свойства: имя шрифта и путь к файлу (к шрифту). Следующие примеры будут относительно шрифта Open Sans. Рассмотрим первый пример.

Пример 1

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), 
         url('/font/open_sans.ttf') format('truetype');
}

Свойство font-family мы применяем, чтобы указать имя шрифта (далее будем использовать его так: p {font-family: "Open Sans" sans-serif}). Часть кода local('Open Sans') означает проверку на наличие у пользователя этого шрифта. Если вы не хотите проверять наличие шрифта у пользователя, то можно писать как во втором примере.

Пример 2

@font-face {
    font-family: 'Open Sans';
    src: url('/font/open_sans.ttf') format('truetype');
}

Третий пример более полный и более кроссбраузерный.

Пример 3

@font-face {
    font-family: 'Open Sans';
    src: url('open_sans.eot');
    src: url('open_sans.ttf') format('truetype'),
         url('open_sans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Другие способы подключения шрифтов

Способ первый (например, берем шрифт с сайта Google), код вставляется в <head>:

Пример 4

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

Способ второй (вставляется в CSS файл):

Пример 5

@import url('http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic');

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Итоги раздела «Самые основы Python»Знакомство с Python

Поиск хостов с помощью NmapРазведка и сканирование

Типы данных в PythonЗнакомство с Python

Написание модулей в PythonЗнакомство с Python

Продолжаем написание классов в PythonЗнакомство с Python

Работа с файлами в PythonЗнакомство с Python

Обработка исключений (try/except) в PythonЗнакомство с Python

Переменные, комментарии и типы данных в PHPКурс по PHP

Условная инструкция if-elif-else в PythonЗнакомство с Python

Предыдущий урок «108. Свойство font в CSS» Следующий урок «110. Как сделать отступ или красную строку в CSS»

HTML

CSS

Браузер

Вернуть расположение блоков

Код HTML

Код CSS

Браузер×

Задание

Восстановить код

Чтобы использовать все функции сайта (например: сохранение прогресса прохождения уроков, участие в рейтинге среди пользователей, прохождение тестов, просмотр внешних ссылок и скриншотов в некоторых курсах), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

Подключите шрифт при помощи @font-face с именем Fonter (url укажите fonter.ttf, а format укажите truetype)

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.

Необходимо авторизоваться, чтобы проверить задание
Это займет не больше минуты.