3

Почему-то не подключается конкретный шрифт в CSS.

Пример рабочего кода:

font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBold.ttf'),
     url('fonts/Open_Sans/opensans-semibold-webfont.woff2') format('woff2'),
     url('fonts/Open_Sans/opensans-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

А эта часть отказывется работать:

font-family: 'Poppins';
src: url('fonts/Poppins/Poppins-Medium.ttf')
     url('fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'),
     url('fonts/Poppins/poppins-medium-webfont.woff') format('woff'),
     url('fonts/Poppins/Poppins-Medium.eot');
font-weight: normal;
font-style: normal;

Уже конвертировал в разные форматы, проверял пути и т.д.
Что характерно, в режиме разработчика стиль отображается. Текст на латинице, так что конфликт с кириллицей отпадает.
Как видите, имеется рабочий шрифт, лежащий в соседней папке, и подключенный абсолютно таким же способом. И он работает.

4
  • OpenSans может работать, потому что установлен у вас в системе, а Попинс не срабатывает из-за неверного пути (например, не хватает слэша в начале).
    – DaemonHK
    28 мая 2020 в 4:09
  • Зачем вам так подключать, используйте google fonts.
    – Ravshan
    28 мая 2020 в 7:00
  • Всё сделал через google fonts. Open Sans не работает, если неправильно задать директорию или отключить woff и woff2. Ошибка указания пути маловероятна, так как пользуюсь плагинами для этого. Вроде проблема с подключением решена, но остался вопрос. Почему одни шрифты работают, а другие нет? 29 мая 2020 в 11:32
  • google-webfonts-helper.herokuapp.com/fonts - должно помочь, выбираете шрифт, настраиваете и скачиваете
    – soledar10
    20 сен 2020 в 15:21

1 ответ 1

1

Рекомендую взять шрифт с Google Fontes. Инструкция:

  1. Выбираем шрифт с сайта https://fonts.google.com/
  2. Выбираем семейство шрифтов (например, Roboto)введите сюда описание изображения
  3. Выбираем шрифтывведите сюда описание изображения
  4. Копируем import и вставляем в css файлвведите сюда описание изображения
  5. Теперь мы можем использовать эти шрифты. В моём случае для вызова шрифта нужно написать:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
p{
font-family: 'Roboto', sans-serif; /*семья*/
font-weight: Regular 400; /*конкретный шрифт, один из тех, что мы импортируем*/
}
<body>
<p>stackoverflow</p>
</body>

Не загружайте много шрифтов, от этого сайт начинает долго загружаться

Полезная статья о шрифтах на htmlbook: http://htmlbook.ru/css/font

Ваш ответ

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

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