CODEWITHSUNDEEP
ruby-on-railsfontsasset-pipeline
firewire167
firewire167

Reputation: 139

Custom fonts are shown in inspector, but the font isn't changing in rails

I have been trying to get these custom fonts working. The server starts up like normal, nothing strange shows up in the console log, it shows in the inspector that they are taking the font-family: "audimatregular" but the font isn't changing.

home.scss

@font-face {
  font-family: 'audimatregular';
  src:url('audimatregular.otf');
  src:url('audimat.eot?#iefix') format('otf'),
    url('audimatbold.svg#audimat') format('otf'),
    url('audimatbolditalic.woff') format('otf'),
    url('audimatitalic.ttf') format('otf');
  font-weight: normal;
  font-style: normal;
}

.section1 {
  font-family: "audimatregular";
}

Folder tree

/app
+---assets
|   +---fonts
|   |       audimatbolditalic.otf
|   |       audimatitalic.otf
|   |       audimatbold.otf
|   |       audimatregular.otf
|   +---images
|   +---javascripts
|   +---stylesheets

rails version

Rails 5.1.3

Server logs

Started GET "/" for 127.0.0.1 at 2017-08-21 21:13:09 -0400
   (0.2ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
Processing by HomeController#index as HTML
  Rendering home/index.html.erb within layouts/application
  Rendered home/index.html.erb within layouts/application (781.9ms)
Completed 200 OK in 879ms (Views: 869.2ms | ActiveRecord: 0.0ms)

Upvotes: 1

Views: 1190

Answers (3)

hashrocket
hashrocket

Reputation: 2222

Try adding the font-url helper to your css:

src:font-url('...')

Here is my code:

@font-face {
  font-family: 'audimatregular';
  src:font-url('AUdimat-Regular.otf');
  font-weight: normal;
  font-style: normal;
}

Make sure you restart your server after making the changes.

Upvotes: 1

kuwantum
kuwantum

Reputation: 314

Have you used scaffolds? If you have scaffolds.css.scss anywhere that will block custom fonts.

Also, have you checked the rails server logs when you load a page that should have the font? What error is it giving?

Upvotes: 0

Crashtor
Crashtor

Reputation: 1279

Here's what I use to do:

@font-face {font-family: 'Segoe UI'; 
src: url('/assets/segoe.eot?#iefix') format('embedded-opentype'), url('/assets/segoe.woff') format('woff'), 
url('/assets/segoe.woff2') format('woff2'), 
url('/assets/segoe.ttf')  format('truetype'), url('/assets/segoe.svg#svgSegoe') format('svg');}

No matter where in Assets you put things, you can always just use /assets/asset.jpg to link to that specific file, cause the pipeline will look through all folders under /assets. – But if you add a custom folder, like assets/fonts, you must add that folder to the pipeline, see this question on how to do that. If you feel that is too complicated, just put all the font files in the images-folder (or any existing folder within the assets folder)

Hope this helps

Upvotes: 1

Related Questions