Блог

Главная - Вопросы по программированию - Не удается применить пользовательские шрифты в css

Не удается применить пользовательские шрифты в css

#html #css #fonts

#HTML #css #шрифты

Вопрос:

Мне трудно понять, что не так… Я объявляю простое правило шрифта:

 @font-face {
  font-family: 'my-font';
  url: ('/assets/font.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

Я объявляю это так:

 body {
  font-family: 'my-font', monospace;
}

body h1 {
  font-family: inherit;
}

Структура файла:

 index.html
styles.css
assets/
  font.woff2

h1 всегда отображает моноширинное пространство, независимо от того, какой URL-адрес.

Если я посещаю localhost:port/assets/font.woff2 , шрифт правильно загружается браузером. Если я добавлю <link … rel=»preload»>, запрос будет выполнен, но, похоже, он все еще не применяется к документу.

Я тестировал в нескольких браузерах.

Комментарии:

1. попробуйте этот URL: url: (‘../assets/font.woff2’) формат (‘woff2’);

Ответ №1:

В объявлении нет ничего плохого. Попробуйте этот способ :

            @font-face {
             font-family: 'MyFont';
             src:  url('./assets/font.woff2') format('woff2'),
        }

Комментарии:

1. Точно так же он таинственным образом перестал работать, теперь, тестируя с другими шрифтами и форматами, мой woff2 снова начал работать, спасибо за помощь!

Ответ №2:

это должно быть

 src: url('./assets/font.woff2')

Ответ №3:

Можете ли вы подтвердить это?

  • Правило @font-face должно быть добавлено в таблицу стилей перед любыми стилями, не так ли?
  • Файл шрифта находится в корневом каталоге вашей веб-страницы?
  • Попробуйте ‘MyFont’, а не ‘my-font’.
 @font-face {
    font-family: Chunkfive;
    src: url('Chunkfive.otf');
}

Ответ №4:

Попробуйте это для URL файла шрифта.

 url: ('./assets/font.woff2') format('woff2');