How to add a custom font to Rails app?

by

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

More Related Contents:

  1. Are eot, ttf, and svg still necessary in the font-face declaration?
  2. Same font except its weight seems different on different browsers
  3. Browsers’ default CSS stylesheets
  4. CSS Font Border?
  5. Wait for fonts to load before rendering web page
  6. What does the forward slash mean in the CSS font shorthand?
  7. Why should we include ttf, eot, woff, svg,… in a font-face
  8. Is there any “font smoothing” in Google Chrome?
  9. Modify twitter bootstrap navbar
  10. Failed to decode downloaded font
  11. Create webfont with Unicode Supplementary Multilingual Plane symbols
  12. How to import fonts in CSS?
  13. How is font size calculated?
  14. How can one import only variables and mixins from Sass stylesheets?
  15. Converting and rendering web fonts to base64 – keep original look
  16. Font size in CSS – % or em? [duplicate]
  17. Multiple font-weights, one @font-face query
  18. Webfont Smoothing and Antialiasing in Firefox and Opera
  19. Force Non-Monospace Font into Fixed Width Using CSS
  20. Fonts looks different in Firefox and Chrome
  21. Fallback fonts on special characters
  22. Specifying Style and Weight for Google Fonts
  23. Why would font names need quotes?
  24. Styling Password Fields in CSS
  25. What does font-size really correspond to?
  26. Make text height 100% of div?
  27. Non-Standard fonts in web?
  28. How to add fonts to create-react-app based projects?
  29. Forcing anti-aliasing using css: Is this a myth?
  30. css different font sizes on different families

Leave a Comment