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
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 .
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')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With