Basic font weight change

Ionic Framework ionic-v3
1

Hey again, new to Ionic and I wanted to know how does one go about to style a text?
I mean I’ve made a simple page, say home.html, likewise:

<ion-content padding>
  <h1 class="title-custom" text-center>this is a title</h1>
</ion-content>

and then over at home.scss I’d do this (which as a web developer is a basic form of styling),
page-home {
.title-custom {
font-weight: 300;
padding-top: 2em;
}
}

But when I run the app on browser, it’s like that title is not even considering the “title-custom” class. How do I change anything when it comes to styling?

2

Does the font have a lower/higher font-weight?

Try different font-weights not every font has font-weights with 100/200/300/400/500

3

Yep, the style works if I use in-line styling, but not if I use it the way I mentioned in the question. Even the color won’t change.

4

And do you have page-selector: ‘page-home’; in your home.ts?

2 Likes
5

okay hey, that worked. I added selector: 'page-home' to the component at home.ts. Thanks!

6

You are welcome. Please mark my answer as solution and like it.

Have a great day.

7

Can you Please Elaborate…