How to add a custom font?


#1

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??


#2

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.


#3

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…


#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!


#5

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