Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fonts are not included correctly #1204

Open
jmuheim opened this issue Oct 2, 2019 · 3 comments
Open

Fonts are not included correctly #1204

jmuheim opened this issue Oct 2, 2019 · 3 comments

Comments

@jmuheim
Copy link

jmuheim commented Oct 2, 2019

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
Copy link
Author

jmuheim commented Oct 9, 2019

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
Copy link
Author

jmuheim commented Oct 9, 2019

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:

image

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:

image

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
Copy link
Author

jmuheim commented Oct 9, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant