0

Искал в интернете , как подключить шрифты к сайту, с ссылкой на локальный файл, но полного ответа нигде не нашел Объясните пожалуйста по пунктам и в полном объеме, что нужно сделать, чтобы подключить шрифты к html и css файлам

1

1 ответ 1

1
  1. Находите или создаете файлы шрифтов (в разных форматах, для кросс-браузерности). Например, у вас шрифт "Шо-то-там" - вам понадобятся файлы шрифта. Кладете их в папку, например, /your-site/fonts. Получаете в ней такой набор файлов:

    • st-Regular.ttf
    • st-Italic.ttf
    • st-Bold.ttf
    • st-Regular.woff
    • st-Italic.woff
    • st-Bold.woff
  2. Создаете в 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;
}

  1. Применяете в стилях нужных элементов свойство font-family, указав "затычку" на случай неподгружения файлов шрифта:

    .my_bold_element { font-family:Shototam,Sans-serif,Arial; font-weight:bold; }

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.