Change font and font size of tagline?

• 

  sanampej · Member · Feb 29, 2012 at 12:07 am

  • Copy link
  • Add topic to favorites

  Hello there,

  I’m interested in changing at least the font size, and possibly the font, for my tagline. Is there a way to do this either directly or in CSS? I’d love for it to “pop” a little more–it’s looking pretty light and definitely too small.

  Here is the link: http://play-to-heal.com/

  Thanks in advance for your help.

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

• 

  designsimply · Member · Mar 1, 2012 at 3:42 pm

  • Copy link

  You can change the font, font size, and line height for the tagline in the Twenty Ten theme with this CSS:

  #site-description {
  font-size: 1.5em;
  line-height: 1.5em;
  font-family: Georgia, Times New Roman, Times, serif;
  }

  Note that you should add that CSS to your Appearance → Custom Design → CSS page.

  To learn more about font stacks, see http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

• 

  sanampej · Member · Mar 2, 2012 at 10:26 pm

  • Copy link

  If I also want to put the description in bold, how can I add that to the CSS above? Is there a way to put it under my site title, all as one long line, as well?

  Thanks so much…you’re helping me a lot.

  Best,
  Sanam

• 

  designsimply · Member · Mar 5, 2012 at 7:36 pm

  • Copy link

  If I also want to put the description in bold, how can I add that to the CSS above?

  Sure! To make the tagline appear bold in the Twenty Ten theme, add this to the block I posted above:

  font-weight: bold;

  Note that the font color is gray, and so you might also want to change the font color as it will make it look more bold than it does in gray. Experiment to see what you like best.

  color: black !important;

• 

  designsimply · Member · Mar 5, 2012 at 7:37 pm

  • Copy link

  Is there a way to put it under my site title, all as one long line, as well?

  Yep. To make the Twenty Ten site description, or tagline, appear on it’s own line, try adding this CSS:

  #site-description {
  clear: none;
  float: left;
  width: auto;
  margin-top: 0;
  }