Font Customization

• 

  justhomemade · Member · Feb 16, 2012 at 10:47 pm

  • Copy link
  • Add topic to favorites

  I just upgraded to custom design. Before that, I was using h1 h2 h3 etc for font variation. So all through the blog posts, fonts are set as h1, h2, etc with body text being h5.

  Now, When I use custom fonts available in the upgrade, and set a font for headings, even the font for body text along with the blog header is changed.. (because of how I have set all this while)

  1) How can I set the fonts only for the post headers and not for the body text or vice versa?

  2) Also, wordpress is not allowing me to use google fonts using link (href..). Is there a workaround for this.

  3) Is there a way to use the custom fonts inside the CSS for each segment for better customization. I need to set different font for widget title and custom fonts are only for site title (which I don’t need), headings and body text..

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Feb 17, 2012 at 9:37 pm

  • Copy link

  1) How can I set the fonts only for the post headers and not for the body text or vice versa?

  Well, if you have made all your body text into headers… that’s tricky! But you could style them differently by styling h1, h2, h3, etc. one way and then styling h5 back to whatever you want the body text to look like.

  2) Also, wordpress is not allowing me to use google fonts using link (href..). Is there a workaround for this.

  I’m sorry but there isn’t! You cannot add <link> html codes to WordPress.com blogs.

  3) Is there a way to use the custom fonts inside the CSS for each segment for better customization. I need to set different font for widget title and custom fonts are only for site title (which I don’t need), headings and body text..

  Yes, you can do that for the fonts that are loaded from Typekit via the Appearance → Custom Design → Fonts tab. For example, if you set the Body Text to use Droid Sans on that page, that would cause the font to get loaded when your site is viewed and you would be able to use Droid Sans in a font stack in your CSS like this:

  h5 {
    font-family: droid-sans-1,droid-sans-2,"Helvetica Neue",Helvetica,Arial,sans-serif;
  }

• 

  justhomemade · Member · Feb 28, 2012 at 4:24 pm

  • Copy link

  Thanks a bunch designsimply.
  You’ve been of tremendous help! Have used this with typekit fonts..

• 

  designsimply · Member · Mar 1, 2012 at 3:01 am

  • Copy link

  Cheers! :)