Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

123. Как подключить сторонний шрифт в 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');

Похожие уроки и записи блога

Написание модулей в PythonЗнакомство с Python
Работа с файлами в Python Знакомство с Python
Урок 3. Генерация SSH-ключа для работы с GitHubБлог
Свойство background для работы с фономЦвета и фон
Типы данных в PythonЗнакомство с Python
Обработка исключений (try/except) в PythonЗнакомство с Python
Продолжаем написание классов в PythonЗнакомство с Python
Еще о возможностях модулей в Python Знакомство с Python
Погружение в PythonЗнакомство с Python
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно