Fonts are not included correctly

[jmuheim]

As described in Rails asset pipeline: custom font does not load (hash not appended to file name in compiled CSS), my Rails app suddenly didn't serve custom fonts anymore.

Thanks to the folks on StackOverflow, I could fix the problem by changing src: url(...) to src: font-url(...) when loading the font file in the CSS.

Before:

@font-face
  font-family: 'Fredericka the Great'
  src: local('Fredericka the Great'), local('FrederickatheGreat'), asset-url('assets/fredericka_the_great.woff2') format('woff2')

After:

@font-face
  font-family: 'Fredericka the Great'
  src: font-url('fredericka_the_great.woff2')
  src: font-url('fredericka_the_great.woff2') format('woff2')

This worked for me, but apparently, Bootstrap-Sass still does it the old way:

// _glyphicons.scss, around line 10
@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");
  }
}

Should this be changed to use font-url, too?

[jmuheim]

With the following quick-fix, at least the icons are displayed now.

First, copy the file glyphicons-halflings-regular.woff2 to app/assets/bootstrap folder.

Then add somewhere in your CSS:

@at-root
  @font-face
    font-family: 'Glyphicons Halflings'
    src: font-url('bootstrap/glyphicons-halflings-regular.woff2') format('woff2')

Still, there are failing requests for missing font files, which leads to slow loading behaviour. Very annoying, all of this.

[jmuheim]

Digging deeper into the issue, I wonder whether it has something to do with the following.

Because glyphicons didn't show, I had to tweak the $icon-font-path variable:

$icon-font-path: '/assets/bootstrap/'

I got this here: https://gist.github.com/iamatypeofwalrus/6467148

I tried removing this (hoping that some gem update might have fixed this problem, so the above work-around would be obsolete now), but then the fonts still are not found:

I also did various attempts on adding the correct path to the assets pipeline; some of them were:

Rails.application.config.assets.paths << 'fonts'
Rails.application.config.assets.paths << 'bootstrap'
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bootstrap')
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts', 'bootstrap')
Rails.application.config.assets.paths << Rails.root.join('assets', 'fonts', 'bootstrap')
Rails.application.config.assets.paths << Rails.root.join('fonts', 'bootstrap')
Rails.application.config.assets.paths << Rails.root.join('vendor', 'fonts', 'bootstrap')

The font files live under [gem name]/assets/fonts/bootstrap:

So I'm not sure why neither of the specified paths would fix the problem.

I'm close to removing glyphicons altogether from my project and stick to FontAwesome, but I'd really like to solve problems instead of working around them.

[jmuheim]

According to https://stackoverflow.com/questions/31468298/some-glyphicons-not-working-with-bootstrap-sass#answer-33821399, the following is the most painless solution for me now:

@font-face {
  font-family:'Glyphicons Halflings';
  src: font-url("bootstrap/glyphicons-halflings-regular.eot");
  src: font-url("bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
       font-url("bootstrap/glyphicons-halflings-regular.woff") format("woff"),
       font-url("bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),
       font-url("bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")
}

This allows me to remove the $icon-font-path: '/assets/bootstrap/' variable. Still, it feels quirky (or at least redundant), and it leads to a delay between page load and display of icons.