Jump to content


Photo

Changing Post Title Fonts using the Google Fonts API


This topic has been archived. This means that you cannot reply to this topic.
12 replies to this topic

#1 bibson

bibson

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 16 November 2010 - 11:50 AM

Hello, I've tried following the instructions on this Documented video ( http://www.pagelines...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.

#2 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 16 November 2010 - 07:42 PM

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)

#3 bibson

bibson

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 16 November 2010 - 08:17 PM

(@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?

#4 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 16 November 2010 - 10:56 PM

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.

#5 bibson

bibson

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 16 November 2010 - 11:36 PM

This is the site http://itsmyi.com

#6 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 17 November 2010 - 05:55 AM

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

#7 bibson

bibson

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 17 November 2010 - 11:02 AM

Text & Fonts settings page http://awesomescreenshot.com/0ab3lqqef Thanks Bryan :-)

#8 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 17 November 2010 - 05:40 PM

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)

#9 bibson

bibson

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 17 November 2010 - 05:55 PM

In other words should I disable the Cufon Fonts?

#10 bibson

bibson

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 17 November 2010 - 06:11 PM

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.

#11 bibson

bibson

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 17 November 2010 - 06:41 PM

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

#12 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 17 November 2010 - 07:09 PM

try `.clip h4.post-title`

#13 bibson

bibson

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 17 November 2010 - 07:44 PM

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.