Jump to content
Sign in to follow this  
bibson

Changing Post Title Fonts using the Google Fonts API

Recommended Posts

bibson    0
bibson

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
cmunns    16
cmunns

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
bibson    0
bibson

(@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
cmunns    16
cmunns

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
bryan-hadaway    3
bryan-hadaway

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
cmunns    16
cmunns

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
bibson    0
bibson

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
bibson    0
bibson

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
bibson    0
bibson

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

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  

×