Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote -1 down vote favorite

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

up vote 0 down vote

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.