rails and bootstrap with custom fonts? - css

Question

I am trying to learn how to use custom fonts however I keep getting a jquery error I think it is? while trying to load the fonts.
It's this error here:
jquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js?body=1:3735 GET http://localhost:3000/assets/fonts/dayslater/dayslater.ttf
I have added this line inside application.rb:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
my css:
#font-face {
font-family: 'dayslater';
src: url('fonts/dayslater/dayslater.ttf') format('truetype');
}
please note that these bits of CSS are in different files but even in the same file they do not work.
#dayslat {
font: 3em 'dayslater';
font-weight: bold;
color: white;
text-align:center;
}
I was just wondering why it will not work thank you

Answer 1

I managed to get this working, thanks to Igor.
He pointed out that instead of having
font: 3em 'dayslater';
It should instead be:
font-family: 'dayslater';
font-size: 3em;
and also adding this line in application.rb:
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
however what the problem was, rails now automatically detects font files,
so when I had
fonts/--font folder--/font.ttf
It should have been:
--font folder--/font.ttf

Answer 2

Try this:
#dayslat {
font-family: 'dayslater';
font-size: 3em;
font-weight: bold;
color: white;
text-align:center;
}
add in application.rb below string:
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
in your css use:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
font-style: normal;
font-weight: normal;
}
with your own font-name