I\'m researching how to add custom fonts to my Rails app, e.g. by adding a fonts folder in the assets folder - and I cannot find an \"official\" Rails way on ho
Just did it...
Download and save the font files (eot, woff, woff2...) in your assets/fonts/ directory
What this does is it precompiles your fonts folder just as it does by default with your images, stylesheets etc.
and make sure this line is set to true config.assets.enabled = true
In your sass/scss or even inline with tag
@font-face { font-family: 'Bariol Regular'; src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');
src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')
format('eot'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')
format('woff'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')
format('truetype'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')
format('svg'); font-weight: normal; font-style: normal; }
Note that you should use the font-url helper instead of css' url to address the fingerprinting done by Rails when it precompiles the assets
Finally, set the font-family in your CSS files
body {
font-family: 'Bariol Regular', serif;
}
FREE TIP: This being said, the best way in terms of performance is to set this up with JS so that these fonts get loaded asynchronously. Check this loader: https://github.com/typekit/webfontloader