Уже стало обычным то, что шрифты на сайте используются сторонние, т.к. стандартный набор шрифтов установленных в вашу операционную систему не подходит по каким-либо причинам (как правило – не устраивает вид и начертание). Поэтому возникает необходимость в использовании разнообразных шрифтов, разработанных другими компаниями.

 

Как же подключить шрифт к странице? Существует несколько способов:

1. Использование сервиса Google Fonts – https://fonts.google.com , где достаточно "наплюсовать" необходимые шрифты и затем с помощью вспомогательного окна в правой нижней части экрана провести дополнительную кастомизацию (выбрать жирность, курсив), и затем на вкладке Embed скопировать ссылку для вставки в тег head. 
 

2. Подключение шрифта, размещая его на своем сайте:

На сегодняшний день для подключения шрифта достаточно иметь всего два файла в формате woff и woff2. Файлы в этих форматах занимают мало места, соответственно быстрее подгружаются к страничке, они поддерживаются всеми современными браузерами https://caniuse.com/#search=woffhttps://caniuse.com/#search=woff2 (кроме Opera Mini) и включать файлы в форматах ttf, eot или svg – пережиток прошлого.
 

Таким образом, код для вставки в css файл выглядит так:

@font-face {
	font-family: 'Roboto';
	src: local('Roboto'),
	     url('../fonts/Roboto.woff2') format('woff2'),
	     url('../fonts/Roboto.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

 

При необходимости подключить одно название шрифта и при этом указывать разную жирность или курсив, следует использовать такую конструкцию CSS:

@font-face {
	font-family: 'museo_sans_cyrl';
	src: url('../fonts/museosanscyrl-100.woff2') format('woff2'),
		 url('../fonts/museosanscyrl-100.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'museo_sans_cyrl';
	src: url('../fonts/museosanscyrl-300.woff2') format('woff2'),
		 url('../fonts/museosanscyrl-300.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}


@font-face {
	font-family: 'museo_sans_cyrl';
	src: url('../fonts/museosanscyrl-500.woff2') format('woff2'),
		 url('../fonts/museosanscyrl-500.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

И затем в коде достаточно указывать необходимую жирность только с помощью font-weight.

 

Код устаревших конструкций  можно уже не применять. Код приводится для ознакомления:

@font-face {
	font-family: 'Roboto';
	src: local('Roboto'),
	     url('../fonts/Roboto.eot'),
	     url('../fonts/Roboto.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/Roboto.woff') format('woff'),
	     url('../fonts/Roboto.ttf') format('truetype'),
	     url('../fonts/Roboto.svg#Roboto') format('svg');
	font-style: normal;
	font-weight: normal;
}

 

Сервисы для конвертации шрифтов ttf, otf в woff и woff2:

 

Шрифты можно найти на сайтах:

comments powered by HyperComments
Понравился материал - нажмите, пожалуйста, на кнопку
=)