0

I'm having trouble using custom fonts in my webapp. I downloaded a font called Chunkfive and put it in a folder app/assets/fonts/. Then I went to my styles.css.scssfolder where I keep all of my css and installed the font like this:

@font-face {
font-family: "Chunkfive";
src: url(app/assets/fonts/Chunkfive.otf) format("truetype");
}

Then I changed the font of the body like this:

body {
    padding-top: 70px;
    background-color: #edf9fd !important;
    font-family: "Chunkfive" !important;
}

Yet it doesn't work. I'm getting a font that looks like Times New Roman - this happens everytime when I try a custom font. What did I do wrong?

TredOut
  • 57
  • 1
  • 8

1 Answers1

0

The main issue is that the paths in a CSS file are relative to the file it is in - so when you do:

app/assets/fonts/Chunkfive.otf

from a CSS file in app/assets/css, the "end path" is app/assets/css/app/assets/fonts/Chunkfive.otf, which most likely does not exist. Most likely you want to do:

url('../fonts/Chunkfive.otf') format("truetype")

Another possible issue is that some font formats do not work in certain browsers, so it is generally best to have multiple formats, in which case your CSS would look something like this:

@font-face {
    font-family: 'Chunkfive';
    src: url('../fonts/Chunkfive-webfont.eot#') format('eot'),
         url('../fonts/Chunkfive-webfont.woff') format('woff'),
         url('../fonts/Chunkfive.otf') format("truetype"),
         url('../fonts/Chunkfive-webfont.svg#webfontM8M0EYs2') format('svg');
    font-weight: normal;
    font-style: normal;
}
dave
  • 62,300
  • 5
  • 72
  • 93
  • I didn't know end-paths work like that, thank you. However it still didn't solve my problem which is weird. I'm having problems overriding body code in Rails, not even putting !important there helped. It seems like it simply can't recognize the font. – TredOut Aug 24 '15 at 17:08
  • I think you can use url without '../fonts/' in the directory, here is a good stack link: http://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline – CJW Aug 24 '15 at 19:12