How do I include ttf custom font into my Rails app?

Question

I tried following this thread here but I am not able to duplicate their results.

main.css

h1 {
  font-family: 'Shadows Into Light', serif;
  src: url('/assets/fonts/shadows.ttf') format("Shadows Into Light");
  font-size: 40px;
  text-align: center;
  position: relative;
  bottom: 20px; 
  margin: 0 auto 0 auto;
  width:100px;
}

Assets Directories

assets
|
|
---stylesheets
|  |
|   ---main.css
---images
|
|
---images
| 
|
---fonts
   |
    ---shadow.ttf

Additionally, I attempted to manually include the fonts directory into my asset pipeline:

config/application.rb

  class Application < Rails::Application
    config.assets.paths << Rails.root.join("app", "assets", "fonts")

How do I include ttf custom font into my Rails app?

score 0 · Answer 1 · answered Jan 06 '15 at 18:57

@font-face  {
  font-family: 'yourfont';
  src: url('addres-yourfont.eot?#') format('eot'),  /* IE6–8 */
       url('addres-yourfont.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('addres-yourfont.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

score -1 · Answer 2 · answered Jan 06 '15 at 18:20

You do not need to use the asset pipeline at all. Just use google fonts and include the provided url in your layouts.html.erb. However, when you include the link to the font make sure you indicate the src as https and not http. In other words, instead of:

  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">

use

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Shadows+Into+Light">

The latter is being requested over https instead of http. You cannot request assets over non-secure protocols using Heroku.

How do I include ttf custom font into my Rails app?

2 Answers2