CODEWITHSUNDEEP
cssruby-on-railsfonts
user14092875
user14092875

Reputation: 165

changing header font in rails

I'm designing a personal blog using ruby on rails (ruby version 2.6.6)

I've tried using this guide to change the font of the heading in the homepage of my web site. I've added the font I want in app\assets\fonts and I've added the following code:

@font-face {
   font-family: "orangejuice";
   src: url('/assets/fonts/orangejuice.ttf')
}

I've added the aforementioned code into the file 'app\assets\stylesheets\welcome.scss`

and I've also added in the file \node_modules\serve-index\public\style.css the lines:

h1 {
  font-size: 60px;
  font-family: "orangejuice";
}

Unfortunately, nothing happened, and I don't have any other .css files which I can edit.

What could be the problem? Why don't I see a change in my app? the file application.css is empty, there's no other code in it.

In general, I'm having trouble with understanding how to change the design of my site using rails, I've looked at many guides, but I can't find anything which explains all the options I have for designing my site. Perhaps anyone have an advise about what should I read?

Thank you

Upvotes: 0

Views: 384

Answers (1)

b0rdjack
b0rdjack

Reputation: 35

By adding this snippet:

@font-face {
   font-family: "orangejuice";
   src: url('/assets/fonts/orangejuice.ttf')
}

To your welcome.scss file, it will only by accessible in that file.

So what you can do is remove the code above and put it in your application.css:

@font-face {
  font-family: "orangejuice";
  src: url(asset-path("orangejuice.ttf"));
}

h1 {
  font-size: 60px;
  font-family: "orangejuice";
}

In this way it will be globally applied.

Upvotes: 1

Related Questions