How to correctly include webfonts into a bootstrap-sass project?

Question

I created a bootstrap-sass project with yeoman generator.

I want to add a webfont and everytime I compile my scss code I get the following error:

error app/src/stylesheets/main.scss (Line 25: File not found or cannot be read: /Users/username/Desktop/testfolder/fonts/../fonts/nexa-webfont/nexaheavy-webfont.woff)

How can I get rid of the unnecessary ../testfolder/fonts/.. folder in the path?

My main.scss looks like this:

// 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";

Answer 1

When we import fonts we use:

@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;
}

Not quite sure about your setup or font kits though. We place all our fonts in app/assets/fonts and import the fonts like above in app/assets/stylesheets/fonts.scss and then import this file in application.scss.