Archived

This topic is now archived and is closed to further replies.

  • 0

Changing font in Hero Unit

Question

Posted · Report post

Hello.

 

I tried to change the font family for the paragraphs inside a Hero Unit on my home page, because I want the font to be different only there.

 

I am using the following custom CSS, because the only hero I use is the one on the home page, otherwise I would probably assign it an ID. Anyway, here comes the CSS I'm using:

 

.pl-hero-wrap p {
font-family: "Dancing Script", arial, serif;
color: indianred;
!important;
}
 
Any idea why this would only change the font color but not the font family?
 
The only workaround I've found is changing the font family from typography control to what I want in the Hero (that does work), and then one by one changing it with custom CSS everywhere but in the hero. Kind of bad practice and example of inefficiency I believe. I would like to get it straight and adress directly the font family inside the Hero.
 
Inherited CSS for font family in the paragraphs when using typography control is:
 
body, .font1, .font-primary, .commentlist {
font-family: "Dancing Script", arial, serif;
}
 
which obviously works.
 
I can't provide an link at the moment, I apologize.
 
Many thanks.
 

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

Thanks Danny very helpful. I'm sorted on this matter. Regards

Share this post


Link to post
Share on other sites

Posted · Report post

James, many thanks for your reply.

 

I've found Danny's post very useful, and it does clarify the matter.

 

I am still not able to achieve my goal though, not even with the overriding mechanism.

I realized it only happens with google fonts: does this give us a hint?

Changing to any other non-google font works, even without the override.

 

I can live with this of course, but it would be good to understand why this is happening.

 

Regards

Matteo

Share this post


Link to post
Share on other sites

Posted · Report post

You can't simply add a font family: custom font; to a class and expect it to work. You will most likely need to use @Font face see here for more information - http://www.font-face.com/

Share this post


Link to post
Share on other sites