Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
109. Как подключить сторонний шрифт в CSS
Чтобы создать неповторимый и красочный дизайн, приходится подключать свои шрифты. В этом уроке научимся подключать любой шрифт. Подключение нового шрифта осуществляется при помощи правила @font-face
. В этом правиле, как вы наверно догадались, обязательно должны быть два свойства: имя шрифта и путь к файлу (к шрифту). Следующие примеры будут относительно шрифта Open Sans. Рассмотрим первый пример.
@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')
означает проверку на наличие у пользователя этого шрифта. Если вы не хотите проверять наличие шрифта у пользователя, то можно писать как во втором примере.
@font-face {
font-family: 'Open Sans';
src: url('/font/open_sans.ttf') format('truetype');
}
Третий пример более полный и более кроссбраузерный.
@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>
:
<link href = 'http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic' rel = 'stylesheet' type = 'text/css'>
Способ второй (вставляется в CSS файл):
@import url('http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic');
Похожие уроки Codebra
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- Подключите шрифт при помощи
@font-face
с именемFonter
(url
укажитеfonter.ttf
, аformat
укажитеtruetype
)
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.