Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am using wordpress for my blog/site. I am using Freshnews theme from woothemes as the theme for the blog.

Here is the link: http://demo.woothemes.com/freshnews/

The font is not that good and it is way too small and the spacing is bad (too congested).

How do I change the fonts, size, spacing (line and paragraph) throughout the blog.

I know I would have to change it somewhere in the stylesheet. But where exactly and how?

And what are the ways to get this done?

Should I install a font somewhere?

Should I use webfonts (like google webfonts)? What is the advantage in using this?

or what are the other ways?

share|improve this question
    
Why don't you ask at WooThemes support? –  kaiser Oct 25 '11 at 18:09

1 Answer 1

In your stylesheet, you should see this:

/*-------------------------------------------------------------------------------------------*/
/* 1. SETUP */
/*-------------------------------------------------------------------------------------------*/

body {background:#e4e2db;color:#555;font:12px sans-Serif;}
input,select,textarea {border:#cacaca 1px solid;font-size:12px;padding:5px; }
select,#nav{padding:0;}
hr { background-color: #e6e6e6; border:0; height: 1px; margin-bottom: 20px; }

/* Typography */

h1, h2, h3, h4, h5, h6  { margin: 0; font-family:"Droid Serif", Georgia, serif; color: #222; font-weight:normal; }
h1  {font-size: 2em } h2  {font-size: 1.8em;} h3  {font-size: 1.6em;} h4  {font-size: 1.2em;} h5  {font-size: 1em;} h6  {font-size: 0.8em;}
p {margin: 0; }

input, textarea { color:#777; padding: 5px; border-color: #ccc #efefef #efefef #ccc; border-width:1px; border-style:solid; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}

/* Hyperlinks */

a {color:#e8a02c;text-decoration:none;}
a:hover,#top .subscribe a:hover,.author_info a:hover{text-decoration:underline;}

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited,
h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited  { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover  {text-decoration: underline;}

That's where you would adjust the font settings for the theme. As far as custom fonts go, cufon used to be the way to go, but nowadays, it seems that embedding fonts via google fonts is the way to go.

As far as embedding it, all you'd need to do is pick a font and add this:

<link href='http://fonts.googleapis.com/css?family=Spinnaker' rel='stylesheet' type='text/css'>

between <head> and </head> in the header.php file for the theme. Then you could adjust the font settings for whatever you wanted to use that font with like so:

/* Typography */

h1, h2, h3, h4, h5, h6  { margin: 0; font-family:"Droid Serif", Georgia, serif; color: #222; font-weight:normal; }
h1  {font-size: 2em } h2  {font-size: 1.8em;} h3  {font-size: 1.6em;} h4  {font-size: 1.2em;} h5  {font-size: 1em;} h6  {font-size: 0.8em;}
p {margin: 0; font-family: 'Spinnaker', sans-serif;}

Note: "Spinnaker" is the font I chose, so you'd need to replace that in both sections above to see your font that you choose.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.