How to add a custom font?

4

Hi there. I’m trying to figure out why you would import the glyphs to your JavaScript. Maybe it’s a bootstrap thing… but you shouldn’t need import Fonts into the build like that. That’s for JS OR CSS that gets smashed down into the vendor.css etc.

I usually put my fonts in /public/fonts/here, but I’m not sure about custom bootstrap builds.

While trouble shooting this, I suggest you just stick to 1 font - and keep things as simple as possible.

@mixin font-face($name) {
  @font-face {
    font-family: $name;
    src:  url("fonts/#{$name}.eot?") format("eot"),
	  url("fonts/#{$name}.woff2") format("woff2"),
	  url("fonts/#{$name}.woff") format("woff");
  }
}

@include font-face('your-font-name');

body {
    font-family: 'your-font-name';
}

If you’re calling the fonts correctly, and they aren’t working - then you’ll be able to see the error in the browser console - and hopefully see where it’s looking for the fonts, and how you can adjust it.

You can use a mixin like this to spit out the @font-face rule: http://codepen.io/sheriffderek/pen/mELzEY - and you can look at this compiled SCSS in the codepen to ensure it’s working.

Good luck!

1 Like