Jump to content
Sign in to follow this  
mmalfatti

Changing font in Hero Unit

Recommended Posts

mmalfatti

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
James B

Hi there,

 

To change a font using the google font method, please see Dannys example on http://www.pagelines.com/forum/topic/26191-changing-font-type-in-categories-and-sidebar/

 

As per the example, you might need to use #site or #page as a Pagelines override to the code.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
mmalfatti

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
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mmalfatti

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×