Jump to content


Photo
- - - - -

Changing font in Hero Unit


Best Answer James B , 30 May 2013 - 09:34 PM

Hi there,

 

To change a font using the google font method, please see Dannys example on http://www.pagelines...es-and-sidebar/

 

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

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 mmalfatti

mmalfatti

    Member

  • Members

  • 13 posts
  • Country: Country Flag

Posted 30 May 2013 - 08:43 PM

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.
 


#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 30 May 2013 - 09:34 PM   Best Answer

Hi there,

 

To change a font using the google font method, please see Dannys example on

Please Login or Register to see this Hidden Content

 

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



#3 mmalfatti

mmalfatti

    Member

  • Members

  • 13 posts
  • Country: Country Flag

Posted 31 May 2013 - 11:46 AM

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



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17931 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 31 May 2013 - 12:34 PM

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 - 

Please Login or Register to see this Hidden Content



#5 mmalfatti

mmalfatti

    Member

  • Members

  • 13 posts
  • Country: Country Flag

Posted 01 June 2013 - 01:37 PM

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