25

I've got a couple fonts I'd like to use in my RoR application, but their formats are mainly .ttf and .otf, among others. How would I go about embedding these files in my Rails app? Namely, once I put them in my assets folder, what exactly is the syntax for me to embed them in my CSS and/or LESS files?

EDIT: Here's the code I have for now:

@font-face {
    font-family: Vow;
    src: url('/assets/Vow.otf');
}
h1 {
    font-family: Vow;
    text-align: center;
}

It doesn't seem to be working for me. The output in the Rails console is something along the lines of:

ActionController::RoutingError (No route matches [GET] "/assets/Vow.otf")

And examining the page with Firebug says:

downloadable font: download failed (font-family: "Vow" style:normal weight:normal stretch:normal src index:0): status=2147746065
source: http://localhost:3000/assets/Vow.otf
tanookiben
  • 22,575
  • 8
  • 27
  • 25
  • Checkout this http://stackoverflow.com/questions/7973271/using-font-face-with-rails-3-1-app – AnkitG Sep 08 '12 at 08:15

3 Answers3

33

Checkout http://www.css3.info/preview/web-fonts-with-font-face/

Larger example, assuming they're resolved directly under the assets dir

@font-face {
  font-family: 'Nokia Pure Headline';    
  src: url('/assets/nokiapureheadlinerg-webfont.eot');
  src: url('/assets/nokiapureheadlinerg-webfont.eot?iefix') format('eot'),
  url('/assets/nokiapureheadlinerg-webfont.woff') format('woff'),
  url('/assets/nokiapureheadlinerg-webfont.ttf') format('truetype'),
  url('/assets/nokiapureheadlinerg-webfont.svg#webfont3AwWkQXK') format('svg');
  font-weight: normal;
  font-style: normal;
}

Im sorry I dont know LESS

Also for the config of the assets pipeline to have the contents of assets/fonts available under we use:

# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')
Joshua Pinter
  • 45,245
  • 23
  • 243
  • 245
paullth
  • 1,731
  • 2
  • 15
  • 19
  • Edit: Nvm I was able to fix it! Currently it works for me if I have everything in just the assets folder. Will continue working on having fonts in a specific fonts/ folder within the assets/ folder – tanookiben Sep 16 '12 at 09:31
28

Adding a custom font to Rails application

  1. Select font type and download
    for example
    go to http://www.dafont.com
    select font and download font

  2. Generate font files

    go to http://www.fontsquirrel.com/
    select - web font generator - select font u download(unzip file downloaded from http://www.dafont.com).

  3. Retrieve the font files
    This site will generate another zip which contain all required for that font style.
    From that zip, unzip and open css, copy css into your html or css file of that

  4. Add the font to your rails app

    (How to add a custom font to Rails app?)

    config/application.rb 

     config.assets.enabled = true  
 config.assets.paths << "#{Rails.root}/app/assets/fonts"

  5. Add it to the view:

    <html lang="en">  
  <head>  
    <style>  
      @font-face {  
        font-family: 'a_sensible_armadilloregular';  
        src: url('/assets/para/a_sensible_armadillo-webfont.eot');  
        src: url('/assets/para/a_sensible_armadillo-webfont.eot?#iefix') format('embedded-opentype'),  
          url('/assets/para/a_sensible_armadillo-webfont.woff') format('woff'),  
          url('/assets/para/a_sensible_armadillo-webfont.ttf') format('truetype'),  
          url('/assets/para/a_sensible_armadillo-webfont.svg#a_sensible_armadilloregular') format('svg');  
        font-weight: normal;  
        font-style: normal;  
     }  
     .content p {  
        font-family: 'a_sensible_armadilloregular';  
        font-size: 42px;  
     }  
   </style>  
 </head>  
 <body>  
   <div class="content">  
     <p>sample text</p>  
   </div>  
 </body>

Community
  • 1
  • 1
praaveen V R
  • 1,259
  • 1
  • 11
  • 20
  • 3
    I think it is better practice to place it in `config/initializers/assets` with the rest of the asset related configurations, using this syntax: `Rails.application.config.assets.paths << Rails.root.join("/app/assets/fonts")` – rosalynnas Aug 17 '18 at 05:26
2

add a custom font to Rails application by using google fonts

for example i am using Freckle Face
http://www.google.com/fonts#QuickUsePlace:quickUse/Family:
Quick Use: Freckle Face

1. Choose the styles you want:
Impact on page load time
Tip: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.

2. Choose the character sets you want:
Tip: If you choose only the languages that you need, you'll help prevent slowness on your webpage.
Latin (latin)
Latin Extended (latin-ext)

3. Add this code to your website:
Instructions: To embed your Collection into your web page, copy the code as the first element in the of your HTML document.

<link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>

4. Integrate the fonts into your CSS:
The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:

font-family: 'Freckle Face', cursive;

Instructions: Add the font name to your CSS styles just as you'd do normally with any other font.

Example:

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }  

<head>  
  <meta charset='UTF-8' />  
  <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>  
</head>  
<body>  
 <div id="header">  
  <div id="nav">  
   <a href="#contact">Contact</a> <span style="word-spacing:normal; color:white; font-family: 'Freckle Face', cursive;, arial, serif; font-size:20px;"><--Click a link to see this page in action!</span>  
  </div>  
 </div>  
</body>
fishb6nes
  • 139
  • 13
praaveen V R
  • 1,259
  • 1
  • 11
  • 20