Искал в интернете , как подключить шрифты к сайту, с ссылкой на локальный файл, но полного ответа нигде не нашел Объясните пожалуйста по пунктам и в полном объеме, что нужно сделать, чтобы подключить шрифты к html и css файлам
1 ответ
Находите или создаете файлы шрифтов (в разных форматах, для кросс-браузерности). Например, у вас шрифт "Шо-то-там" - вам понадобятся файлы шрифта. Кладете их в папку, например, /your-site/fonts. Получаете в ней такой набор файлов:
- st-Regular.ttf
- st-Italic.ttf
- st-Bold.ttf
- st-Regular.woff
- st-Italic.woff
- st-Bold.woff
Создаете в css-файле столько директив @font-face, сколько файлов шрифтов у вас задействуется:
@font-face {
font-family: 'Shototam';
src: url(/yoursite/fonts/st-Regular.ttf) format('ttf'), url(/yoursite/fonts/st-Regular.woff) format('woff');
font-weight: 400;
}
@font-face {
font-family: 'Shototam';
src: url(/yoursite/fonts/st-Italic.ttf) format('ttf'), url(/yoursite/fonts/st-Italic.woff) format('woff');
font-style: italic;
font-weight: 400;
}
@font-face {
font-family: 'Shototam';
src: url(/yoursite/fonts/st-Bold.ttf) format('ttf'), url(/yoursite/fonts/st-Bold.woff) format('woff');
font-weight: 700;
}
Применяете в стилях нужных элементов свойство
font-family
, указав "затычку" на случай неподгружения файлов шрифта:.my_bold_element { font-family:Shototam,Sans-serif,Arial; font-weight:bold; }