5

I am trying to add a font to my Rails 5.1 project, however, it seems the project can't find the font. Here is the directory for the fonts: 

app
├── assets
│   ├── config
│   │   └── manifest.js
│   ├── fonts
│   │   ├── Open-Sans.eot
│   │   ├── Open-Sans.svg
│   │   ├── Open-Sans.ttf
│   │   └── Open-Sans.woff

In my application.rb I do added the fonts path:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

Here is my base.scss file:

@font-face {
  font-family: "Open-Sans";
  src: asset-url('Open-Sans.ttf') format('truetype');
}

body {
  font-family: "Open-Sans", Helvetica, Arial, sans-serif;
  // font-family: $body-font-family;
  // background-color: #2f4050;
  background-color: #222;
  font-size: 15px;
  color: $text-color;
  overflow-x: hidden;

}

I am not sure what is wrong... any suggestions?

Ning
  • 399
  • 4
  • 14
  • 1
    Can you run `Rails.application.config.assets.paths` in the console and update the question with the output? – Pavan Sep 08 '18 at 17:49
  • You can follow this answer - https://stackoverflow.com/questions/48047545/rails-5-1-2-bootstrap-icons-not-being-served-in-production/48052602#48052602 , Hope it should work. – Sahidur Rahman Suman Sep 08 '18 at 18:03

1 Answers1

2

I think you may have to modify the base.scss file

@font-face {
  font-family: "Open-Sans";
  src: url(asset-path('Open-Sans.ttf')) format("truetype");
}

body {
  font-family: "Open-Sans", Helvetica, Arial, sans-serif;
  // font-family: $body-font-family;
  // background-color: #2f4050;
  background-color: #222;
  font-size: 15px;
  color: $text-color;
  overflow-x: hidden;

}

After this change, You have to restart your web server.

Sahidur Rahman Suman
  • 630
  • 4
  • 16
  • I tried, now I can see the change in the development environment. But the font is still not showing up in the production environment. Is this related to Nginx? – Ning Sep 15 '18 at 16:32
  • Turns out the solution works with www.mysite.com; but mysite.com has some CORS problem. – Ning Sep 15 '18 at 17:14