Archived

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

  • 0

Changing Post Title Fonts using the Google Fonts API

Question

Posted · Report post

Hello, I've tried following the instructions on this Documented video ( http://www.pagelines.com/docs/text-fonts ) , to change the Font of my Post titles, but I'm stuck at the last part where you copy the CSS code into the Custom CSS rules field. Due to the nature of the video, I can't make out what exactly the code is. This is what I've managed to get to so far... .post-title h2{ font-family:'Yanone+Kaffeesatz';} What am I doing wrong? Any help would be appreciated . Thanks.

Share this post


Link to post
Share on other sites

12 answers to this question

Posted · Report post

Let's get a screenshot of your settings for this as well, that might save a lot of time. Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

What CSS are you calling? The Cufon rules may be overwriting what you want your google fonts to be. Add !important; to your css above for testing purposes. (place before semi-colon)

Share this post


Link to post
Share on other sites

Posted · Report post

In other words should I disable the Cufon Fonts?

Share this post


Link to post
Share on other sites

Posted · Report post

Ok I tried using another Google font in the CSS code above (Cuprum) with the Cufon option disabled. It worked. I am now using the same CSS code with the original Font I wanted (Yanone+Kaffeesatz), I removed the '+' from both the CSS Rules field and the Googles Fonts Family box and it worked. CSS code now looks like this >>

.post-title h2{ font-family:'Yanone Kaffeesatz';}

Note* The plus '+' has to be removed on all instances. Huge Thanks to both of you for your time trying to resolve this issue. Appreciate it.

Share this post


Link to post
Share on other sites

Posted · Report post

Just as I was about to close this topic as resolved, I noticed that the font only changed on the Full width posts (Using the Magazine style layout). How do I go changing All posts title to use the same Font? Using Firebug to inspect the header element (h4, I thought using the same piece of CSS above and changing 'h2' to h4 will work, but thats not the case. Screenshot below http://awesomescreenshot.com/0323m8w46

Share this post


Link to post
Share on other sites

Posted · Report post

try `.clip h4.post-title`

Share this post


Link to post
Share on other sites

Posted · Report post

I got it figured out by just adding the other headers on the same code h1, h2, h3 etc

.post-title h1, h2, h3, h4{ font-family:'Yanone Kaffeesatz';}

Thanks for your help.

Share this post


Link to post
Share on other sites

Posted · Report post

You could actually place it in the platform settings - Text Options area. Does that not work? (use just the name of the font Yanone+Kaffeesatz)

Share this post


Link to post
Share on other sites

Posted · Report post

(@cmunns - Thanks for the response) That doesn't seem to work at all. Do I have to remove that piece of code I added to the custom CSS field earlier?

Share this post


Link to post
Share on other sites

Posted · Report post

No, can i see a link to your site. If you followed the video there's probably just a minor adjustment that needs to be made.

Share this post


Link to post
Share on other sites