How to add a custom font?

So I’m trying to create a bootstrap custom build without all the components, I downloaded a sass bootstrap copy and plug it into my css, everything works nice except for the glyphicons, the icons folder is contained within my vendor folder like this: vendor/assets/fonts/glyphicons

I’ve imported the fonts like this :

app.import(‘vendor/assets/fonts/glyphicons/glyphicons-halflings-regular.eot’,{ destDir: ‘assets/fonts’ }); app.import(‘vendor/assets/fonts/glyphicons/glyphicons-halflings-regular.svg’,{ destDir: ‘assets/fonts’ }); app.import(‘vendor/assets/fonts/glyphicons/glyphicons-halflings-regular.ttf’,{ destDir: ‘assets/fonts’ }); app.import(‘vendor/assets/fonts/glyphicons/glyphicons-halflings-regular.woff’,{ destDir: ‘assets/fonts’ }); app.import(‘vendor/assets/fonts/glyphicons/glyphicons-halflings-regular.woff2’,{ destDir: ‘assets/fonts’ });

this is what the _glyphicos.sass partial looks like:

@at-root { // Import the fonts @font-face { font-family: ‘Glyphicons Halflings’; src: url(if($bootstrap-sass-asset-helper, twbs-font-path(’#{$icon-font-path}#{$icon-font-name}.eot’), ‘#{$icon-font-path}#{$icon-font-name}.eot’)); src: url(if($bootstrap-sass-asset-helper, twbs-font-path(’#{$icon-font-path}#{$icon-font-name}.eot?#iefix’), ‘#{$icon-font-path}#{$icon-font-name}.eot?#iefix’)) format(‘embedded-opentype’), url(if($bootstrap-sass-asset-helper, twbs-font-path(’#{$icon-font-path}#{$icon-font-name}.woff2’), ‘#{$icon-font-path}#{$icon-font-name}.woff2’)) format(‘woff2’), url(if($bootstrap-sass-asset-helper, twbs-font-path(’#{$icon-font-path}#{$icon-font-name}.woff’), ‘#{$icon-font-path}#{$icon-font-name}.woff’)) format(‘woff’), url(if($bootstrap-sass-asset-helper, twbs-font-path(’#{$icon-font-path}#{$icon-font-name}.ttf’), ‘#{$icon-font-path}#{$icon-font-name}.ttf’)) format(‘truetype’), url(if($bootstrap-sass-asset-helper, twbs-font-path(’#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}’), ‘#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}’)) format(‘svg’); } }

and this is how the _variables.scss looks like:

$icon-font-path: if($bootstrap-sass-asset-helper, “bootstrap/”, “…/fonts/bootstrap/”) !default;

$icon-font-name: “glyphicons-halflings-regular” !default;

$icon-font-svg-id: “glyphicons_halflingsregular” !default;

============================== Anyway I tried this:

@font-face { font-family: ‘Glyphicons Halflings’; src: url(’#{$icon-font-path}#{$icon-font-name}.eot’); src: url(#{$icon-font-path}#{$icon-font-name}.eot?#iefix’), format(‘embedded-opentype’), url(’#{$icon-font-path}#{$icon-font-name}.woff2’) format(‘woff2’), url(’#{$icon-font-path}#{$icon-font-name}.woff’) format(‘woff’), url(’#{$icon-font-path}#{$icon-font-name}.ttf’) format(‘truetype’), url(’#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}’)) format(‘svg’); }

$icon-font-path: “…/fonts/” !default;

also tried this path

$icon-font-path: “…/assets/fonts/” !default;

Does anybody know whats wrong??

This addon does what you’re describing: https://github.com/ef4/ember-sass-bootstrap

You can either use it directly or study it to see how it does the font handling.

Very helpful thanks for taking the time to reply !, although I still don’t know what the path for fonts would be when importing custom fonts into my vendor directory…

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

Awesome, that’s exactly what I was looking for… thank to you both!

That mixin was very useful for importing font files. I have slightly improved it for my use case (I was using it inside an ember addon).

$font-url: '/<app/addon name>/fonts';

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

@include font-face('font--name-400');
body {
    font-family: 'font--name-400';
}