acqwctm acqwctm - 6 months ago 67
CSS Question

Rails - Failing to add custom font to my app

Downloaded the following font https://www.fontsquirrel.com/fonts/montserrat and unzipped it. Stuck the otf files in app/assets/fonts.

I have a file called

base.scss
in my stylesheets folder where I have this code:

@font-face {
font-family: "test";
src: url("/assets/test.otf");
font-weight: normal;
font-style: normal;
}

.test {
font-size: 40px;
font-family: "test";
}


And in my
config/application.rb
file is changed to this:

module Workspace
class Application < Rails::Application

# Do not swallow errors in after_commit/after_rollback callbacks.
config.active_record.raise_in_transactional_callbacks = true

# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')
end
end


However the custom font still is not displaying in text with the
.test
class. What am I doing wrong? I'm using cloud 9 IDE by the way if it makes a difference.

Answer

Here are some tips:

  1. Check browser debug/network console to see if the browser is trying to load that font. Maybe server can't send it?
  2. Have you restarted server after editing config files?
  3. For production purposes change url to asset_url due to asset precompilation. It would be propably necessary to change the:

url("/assets/test.otf");

into

asset_url("test.otf");

Comments