0

Не подключаются шрифты.

Моя структура проекта:

-project
  -dist
    -js
      file.js
    -css
      file.css
    -fonts
      file.ttf
  -src
    -js
      file.js
      ...
    -scss
      stule.scss
      -utils
        fonts.scss
        ...
    -fonts
      file.ttf
      ...
  index.html

В fonts.scss подключаю так

@font-face {
  font-family: Roboto-Medium;
  src: local("Roboto-Medium"),
  url(../fonts/Roboto-Medium.ttf) format("ttf");
}

В style.scss использую так:

@import "utils/fonts";
...

.landing__description-title {
  font-family: "Roboto-Medium";
  width: $landingWidhtTitle;
  ...
}

Но когда собираю проект в webpack на странице index.html шрифт не работает, остальные стили работают.

Если меняю путь с url(../fonts/Roboto-Medium.ttf) format("ttf"); на url(../../fonts/Roboto-Medium.ttf) format("ttf"); выдает ошибку Module not found: Error: Can't resolve '../../fonts/Roboto-Medium.ttf' in 'C:\Users\qwe\webpack-starter\src\scss'/ В чем моя проблема заключается?

6
  • 1
    Если заменить url(../fonts/Roboto-Medium.ttf) format("ttf"); на url(../fonts/Roboto-Medium.ttf) format("truetype"); ?
    – Eleferen
    15 янв 2019 в 6:17
  • Ты лучше свой webpack покажи. И еще шрифтам в scss делать нечего. Подключи их отдельным css - файлом
    – Air
    15 янв 2019 в 6:20
  • Заработало. Что это за зверь format("truetype");?
    – MegaRoks
    15 янв 2019 в 6:20
  • С webpack все в прорядке, он ложет куда надо
    – MegaRoks
    15 янв 2019 в 6:21
  • Не знаю, но у меня он есть... Стоял во всех скаченных файлах
    – Air
    15 янв 2019 в 6:25

1 ответ 1

2

Если верить источнику, то нужно правильно указать тип шрифта ttf. Т.е. заменить

format("ttf")

на:

format("truetype")

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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