fixing_fonts_rails_production.md

Problem:

1. User loads page
2. Precompiled JS and CSS are included
3. CSS references wrong font URL

Solution:

1. User loads page
2. Precompiled JS and CSS are included
3. CSS references right font url

How 3rd happens:

1. Reproduce error on local
2. Run rails server on production 1. rake assets:precompile 1. config.public_file_server.enabled = true for Rails 5
3. You should see error
4. Change font family, this will use asset-url
5. then application.css needs to be renamed to application.scss
6. NO need to add fonts to precompile, like: config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

How to change font family:

1. Look for font face definition inside your css library and copy that to application.scss
2. It should be something like:

@font-face {
  font-family: 'my-library';
  src: url('../fonts/my-library.eot?v=2.4.0');
  src:
    url('../fonts/my-library.eot?v=2.4.0#iefix') format('embedded-opentype'),
    url('../fonts/my-library.woff2?v=2.4.0') format('woff2'),
    url('../fonts/my-library.ttf?v=2.4.0') format('truetype'),
    url('../fonts/my-library.woff?v=2.4.0') format('woff'),
    url('../fonts/my-library.svg?v=2.4.0#my-library') format('svg');
  font-weight: normal;
  font-style: normal;
}

1. use asset-url instead of url
2. change ../fonts or similar to a path that asset-url understands
3. to know which path asset-url understands, go to rails console and enter Rails.application.assets.paths
4. Those are the paths you can reference from, for example is that is throwing:

[
'/my/path/1',
'/my/path/2',
'/my/other/path/3',
]

And your fonts are on /my/other/path/3/my/library/fonts/ then use asset-url('my/library/fonts/thenameofthefont.eof')

At the end you should have something like:

@font-face {
  font-family: 'my-library';
  src: asset-url('my-library/fonts/my-library.eot?v=2.4.0');
  src:
    asset-url('my-library/fonts/my-library.eot?v=2.4.0#iefix') format('embedded-opentype'),
    asset-url('my-library/fonts/my-library.woff2?v=2.4.0') format('woff2'),
    asset-url('my-library/fonts/my-library.ttf?v=2.4.0') format('truetype'),
    asset-url('my-library/fonts/my-library.woff?v=2.4.0') format('woff'),
    asset-url('my-library/fonts/my-library.svg?v=2.4.0#my-library') format('svg');
  font-weight: normal;
  font-style: normal;
}