Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a custom font to Rails app?

Tags:

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 
like image 325
tanookiben Avatar asked Sep 08 '12 08:09

tanookiben


People also ask

Can you upload fonts to PageFly?

To upload a font to your PageFly store, please open Settings > Uploaded Fonts Manager > Upload new font(s). Note that the font formats allowed are . woff, . ttf, and .


1 Answers

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') 
like image 193
paullth Avatar answered Oct 03 '22 10:10

paullth