Как правильно включить веб-шрифты в проект bootstrap-sass?

Я создал проект bootstrap-sass с генератором yeoman.

Я хочу добавить веб-шрифт, и каждый раз, когда я компилирую свой код scss, я получаю следующую ошибку:

error app/src/stylesheets/main.scss (строка 25: файл не найден или не может быть прочитан: /Users/username/Desktop/testfolder/fonts/../fonts/nexa-webfont/nexaheavy -webfont.woff)

Как избавиться от ненужной папки ../testfolder/fonts/.. в пути?

Мой main.scss выглядит так:

// VER: 0.1

/* OVERRIDDEN BOOTSTRAP VARIABLES */
$icon-font-path: "../fonts/bootstrap/";

/* STANDARD INCLUDES */
@import "bootstrap-compass";
@import "bootstrap-sprockets";
@import "bootstrap";
@import "compass/css3";

/* CUSTOM FONT IMPORT */
@include font-face(
  "Nexa Heavy",
  inline-font-files(
    '../fonts/nexa-webfont/nexaheavy-webfont.woff', woff,
    '../fonts/nexa-webfont/nexaheavy-webfont.ttf', ttf,
    '../fonts/nexa-webfont/nexaheavy-webfont.svg', svg),
    '../fonts/nexa-webfont/nexaheavy-webfont.eot',
  normal, // font-weight
  normal  // font-style
);


/* CUSTOM INCLUDES */
@import "custom-variables";
@import "common";
@import "navigation";
@import "footer";

@import "pages/home";

ruby-on-rails twitter-bootstrap webfonts bootstrap-sass compass-sass
person herrh    schedule 21.09.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Когда мы импортируем шрифты, мы используем:

@font-face {
  font-family: "diogenesregular";
  src: asset-url("assets/diogenes-webfont.eot");
  src: asset-url("assets/diogenes-webfont.eot?#iefix") format("embedded-opentype"),
  asset-url("assets/diogenes-webfont.woff2") format("woff2"),
  asset-url("assets/diogenes-webfont.woff") format("woff"),
  asset-url("assets/diogenes-webfont.ttf") format("truetype"),
  asset-url("assets/diogenes-webfont.svg#diogenesregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

Однако не совсем уверен в ваших настройках или наборах шрифтов. Мы помещаем все наши шрифты в app/assets/fonts и импортируем шрифты, как указано выше, в app/assets/stylesheets/fonts.scss, а затем импортируем этот файл в application.scss.

person davidwessman    schedule 21.09.2015
comment
Это работает в Chrome и Safari, но не в Firefox. Любые идеи? - person herrh; 25.09.2015
comment
Может вызвать проблемы с предварительной компиляцией :/ - person davidwessman; 28.09.2015
comment
Можете ли вы опубликовать свой текущий блок импорта? - person davidwessman; 29.09.2015