Уже стало обычным то, что шрифты на сайте используются сторонние, т.к. стандартный набор шрифтов установленных в вашу операционную систему не подходит по каким-либо причинам (как правило – не устраивает вид и начертание). Поэтому возникает необходимость в использовании разнообразных шрифтов, разработанных другими компаниями.
Как же подключить шрифт к странице? Существует несколько способов:
1. Использование сервиса Google Fonts – https://fonts.google.com , где достаточно “наплюсовать” необходимые шрифты и затем с помощью вспомогательного окна в правой нижней части экрана провести дополнительную кастомизацию (выбрать жирность, курсив), и затем на вкладке Embed скопировать ссылку для вставки в тег head.
2. Подключение шрифта, размещая его на своем сайте:
На сегодняшний день для подключения шрифта достаточно иметь всего два файла в формате woff и woff2. Файлы в этих форматах занимают мало места, соответственно быстрее подгружаются к страничке, они поддерживаются всеми современными браузерами https://caniuse.com/#search=woff , https://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:
Шрифты можно найти на сайтах:
