Changing fonts (and related settings) in wordpress theme

Posted on 2011-10-25
Last Modified: 2013-11-19
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:

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?
Question by:smuralisankar
    LVL 23

    Accepted Solution

    I don't use WooThemes, so I'm not familiar with their interface. If you don't have an option to change the font or font size in the theme options section of the theme, you will need to make the changes manually.

    If you make the changes manually you should use a separate stylesheet so it doesn't get over-ridden when you update the theme. To add a stylesheet you would just create a new one using a text editor like Notepad++. Then you'd add the css. Something like this:

    .post {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
    font-weight: 300;
    letter-spacing:.02em; /* This will add additional letter spacing */
    word-spacing:.03em; /* This will add additional word spacing */

    Open in new window

    The .post selector might vary depending on your theme. .post is used in most themes though.

    You would then save the file as my-custom-css.css. Upload it to the theme root folder and add this to the style.css file  @import url(my-custom-css.css); just after the theme declaration that looks like this:
    Theme Name: WOOHOO Theme
    Theme URI:
    Description: A Theme, just like mom used to make.
    Author: Jeremy Jared
    Author URI:
    Version: 1.1
    @import url(my-custom-css.css);

    Open in new window

    You could also use this plug-in that allows you to add custom css:

    The third optino is to create a child theme to add the css:


    Author Closing Comment

    Thanks a lot.

    (sorry for the late reply)

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    Read about how to approach blogging and about ways to do it right. Stand out from the crowd and let your knowledge be consumed by a large audience. This article aims to explain how your blog should look like,  the most important things to do while b…
    The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
    The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    6 Experts available now in Live!

    Get 1:1 Help Now