Jump to content

Archived

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

jmad

Add Google Font

Recommended Posts

jmad

For example, to add "Yellowtail" and "Lato Bold" you would enter: Yellowtail|Lato:700.

You can then reference these fonts in custom CSS.

What is the code to add this in the CSS?

Share this post


Link to post
Share on other sites
Danny
HI, You can find the code on Google WebFonts when you select the font you wish to use - http://d.pr/i/4DiN
.pl-hero h1 { 
  font-family: 'Yellowtail', cursive;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Will that code then make all H1 Yellowtail?  Will I need to assign a size?  Do I need to do the same thing for h2...h6 and <p>?

Share this post


Link to post
Share on other sites
Danny

HI,

The code above is to change the Hero's header and will not effect all headers on your website. For that code to work on all headers and p tags, you will need to target them in your custom CSS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Okay.  Are there instructions or examples of how to do that? I know this is basic but that's where I am...coming over from the design world. 

Share this post


Link to post
Share on other sites
Danny

To add the custom Google Web font to your elements, you need to target them in your CSS, like I have done above for the Hero sections h1.

 

If you want to have your custom Google web font for all your header tags, you would use the following:

 

h1, h2, h3, h4, h5, h6 {

font-family: font name;

}

 

For links and p tags:

 

p, a {

font-family: font name;

}


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Rob

Excellent!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×