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 to compile or convert sass / scss to css with node-sass (no Ruby)?

    How to vertically and horizontally center two images inside a div on a responsive page

    How to target this HTML in CSS?

    How to use CSS 3D to display child elements perpendicular to parent element?

    How to find address of css and js files?

    How do I get the border-radius from an element using jQuery?

    How to make a border colorful using CSS?

    How to make recessed button in CSS

    background image not showing on nested

    How to add font awesome in CSS

    How to insert 5 pictures next to eachother in a row

    how to remove one canvas element from displaying on top of another canvas element

    contenteditable does not show pseudoselector :before in safari

    How to modify this JQuery CSS into my view?

    How can I have % of width of an img wrapped in a specific div width?

    How to get margin to be relative to text amount css

    how to overwrite RadWindow control CSS classes with mine?

    How to make the main content div fill height of screen with css [duplicate]

    How do I get the background image to not repeat and take up the entire section?

    How to select 3rd div which has specific css class

    How to apply CSS to only immediate children of a certain class

    CSS how to get floated left text to wrap?

    howto create the iPhone Contacts header scroll Effect for html?

    How to stop one layer going over another

    How to reset a css animation class using jquery?

    How to scope efficiently javascript et css on a rails appliacation?

    How to put all Array values in $_GET[]

    How to vertically center content in before or after in CSS

    How did overflow actually work here?

    How can I align this?