How to add a custom font to Rails app?


Tags: css,ruby-on-rails,fonts

Problem :

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


Solution :

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')

    CSS Howto..

    how change active class on a listItem using jquery

    How to create shapes in css? [closed]

    How to apply CSS to buttons?

    How to get the exact RGBa value set through CSS via Javascript?

    HTML/CSS/jQuery: How to set an “absolute text bottom” so that further text expands upwards?

    How to have elements copy other element's auto height css?

    How do I align a div at the bottom right corner of a web page even if the content is less?

    How change color of text and image before print with css? [closed]

    How combine multiple media destinations (screen, print) with width restriction?

    How can i get an image inside an li to disregard padding with css

    How to setup a multi-department form using JavaScript

    How to get names of css classes of an element

    How to share js/css/images across Rails applications?

    How to get my navbar to fluidly contain the largest element?

    how to put text on the middle of an image

    How to resize image in css without cropping it? [closed]

    how to make divs adjust to dynamic screen resolutions?

    How to set the box width same as the screen width?

    Loop in Sass @for how to use $#{value}#{$i} correctly?

    How to style a custom TreeCell with CSS in ScalaFX?

    How to apply css to three different classes hovering one of them

    How to override mixins in LESS CSS 1.4+

    How to center image while also aligning text to the right of image?

    How can I make these CSS absolute positions work in IE?

    CSS: How to make left float div to adjust height dynamically? [duplicate]

    CSS: How to move contents of one div into another one

    How to style the values in a textfield using CSS?

    CSS, how to lign up 3 seperate containers side by side under a header in IE

    How to show borders of th elements with gradient fills in IE9?

    How to get the image height of an image to set another div height