Url for the fonts to work on heroku

Ruby on Rails
1

I have this which works in the development environment but does not on heroku because of some assets concept.

@font-face {
  font-family: 'custom-icons';
  src: url('../font/custom-icons.eot?94416284');
  src: url('../font/custom-icons.eot?94416284#iefix') format('embedded-opentype'),
       url('../font/custom-icons.woff?94416284') format('woff'),
       url('../font/custom-icons.ttf?94416284') format('truetype'),
       url('../font/custom-icons.svg?94416284#custom-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

Can anyone tell me what is the right way to configure this so that it works on heroku also?

2

I made a font folder under assets and replaced the code with

@font-face {
  font-family: 'custom-icons';
  src: url('custom-icons.eot?94416284');
  src: url('custom-icons.eot?94416284#iefix') format('embedded-opentype'),
       url('custom-icons.woff?94416284') format('woff'),
       url('custom-icons.ttf?94416284') format('truetype'),
       url('custom-icons.svg?94416284#custom-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

And still can’t get it work on production.

Do I need to do something like

 config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
3

Hi Ankur,

can you give some more detail on how you are referencing the font within your view?

I believe you would need the config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/ to make the fonts available via Heroku’s static asset serving. You can confirm by running rake assets:precompile locally and verifying that the app works with the compiled assets.

4

I got this to work but I had to place the fonts on my public folder.

@font-face {
  font-family: 'custom-icons';
  src: url('/font/custom-icons.eot?94416284');
  src: url('/font/custom-icons.eot?94416284#iefix') format('embedded-opentype'),
       url('/font/custom-icons.woff?94416284') format('woff'),
       url('/font/custom-icons.ttf?94416284') format('truetype'),
       url('/font/custom-icons.svg?94416284#custom-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

I think this code is fetching all the fonts because I am working on one of the bootstrap themes we bought

<ul class="nav navbar-nav pull-right">
									<li class="active"><a href="#home"><i class="icon-home-outline"></i>Home</a> </li>
									<li><a href="#the-problem"><i class="icon-comment"></i>The Problem</a> </li>
									<li><a href="#the-solution"><i class="icon-thumbs-up"></i>The Solution</a> </li>
									<li><a href="#how"><i class="icon-star"></i>How?</a> </li>
									<li><a href="#belief"><i class="icon-popup-1"></i>Our Belief</a> </li>
									<li><a href="#team"><i class="icon-users"></i>Team</a> </li>
									<li><a href="#contactSlice"><i class="icon-mail"></i>Contact</a> </li>
									<li><a href="#aboutus"><i class="icon-mail"></i>About</a> </li>
								</ul>