Правило CSS @font-face, примеры. Как сделать свой шрифт в html

Правило CSS @font-face отвечает за подключение своих или внешних шрифтов на странице сайта. Предварительно рекомендую прочитать про свойство CSS font

Правило CSS @font-face

@font-face: {
	font-family: NameFont; 
	font-size: Xpx; 
	font-style: Style; 
	src: url(usershrift.ttf);
	}

Где:

font-family - свое название шрифта
font-size - размер шрифта
font-style - стиль шрифта
src:url(addr) - адрес где лежит подключаемый шрифт. В рассмотренном примере он лежит в корне под именем usershrift.ttf

@font-face открывает большие возможности в плане оформления текстов на странице. Это позволяет "выделиться" среди остальных сайтов и предложить что-то свое оригинальное. Слово выделиться я взял в кавычки, потому что хочу подчеркнуть тот момент, что есть тонкая грань между сделать красиво или все испортить. К применению своих шрифтов надо всегда подходить очень аккуратно. Далеко не все пользователи оценят это.

Форматы Web шрифтов

EOT
TTF
OTF
CFF
AFM
LWFN
FFIL
FON
PFM
PFB
WOFF
SVG
STD
PRO
XSF

Примечание

Не все браузеры поддерживают все форматы шрифтов. Поэтому нужно через запятую перечислять несколько вариантов форматов шрифтов. Например, IE поддерживает только формат eot. Синтаксис @font-face допускает подключать через запятую несколько форматов:

@font-face: {
	font-family: NameFont; 
	font-size: Xpx; 
	font-style: Style; 
	src: url(usershrift.ttf),
	url(usershrift.eot);
	}

Пример: как сделать свой шрифт на html

<html>
<head>
<style>
	.@font-face{
	font-family: svoy_shrift1; 
	font-size: 14px; 
	src: url(svoy_shrift1.ttf); 
	}
	P{
	font-family: svoy_shrift1;
	}
</style>
</head>
<body>
	<p>Этот текст будет выведен с использованием своего шрифта</p>
</body>
</html>

Необычные шрифты для сайта

Шрифт можно создать самостоятельно через специальные онлайн генераторы шрифтов:

Помимо этого Google предоставляет целую коллекцию шрифтов на странице fonts.google.com.

← Перейти в каталог CSS уроков