WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

closed as off-topic by Mark Kaplun, Pieter Goosen, toscho Apr 27 at 1:54

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

    
Why don't you ask at WooThemes support? – kaiser Oct 25 '11 at 18:09

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

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