How to Change Fonts For Twenty Eleven WordPress Theme

In my previous posts i have explained to add sidebar and to change the width of theme,in this post i will tell you to change the fonts for this theme.
It is a nice and neat font and very suitable for blogs as it is a very readable font. However, it is quite boring. Using it all over the page makes it even more. So it would be nice if we can change some of the fonts and have a couple more font variants to make our blogs a little livelier.

All changes takes place in the Twenty Eleven Stylesheet. In your WP Dashboard, go Appearance – Editor – Stylesheet (syle css)
CHANGE FONTS FOR THE BLOG SITE TITLE IN TWENTY ELEVEN THEME
The Site Title is located just above the header image. You can have a different font for your Site Title if you prefer. Scroll further down in your Styelsheet to find the comment Headings

Immediately below you will find these css codes.

h1,h2,h3,h4,h5,h6 {
    clear: both;
}

Add in the font-family you want to use. Example;

h1,h2,h3,h4,h5,h6 {
    font-family: 'Georgia', serif;
    clear: both;
}

This will effect all font wrapped in the H1 to H6 tags which includes your Site Title. To have a different font just for the Site Title alone, scroll down until you see the comment, Header. Scroll down further until you find these codes

#site-title a {
    color: #111;
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    text-decoration: none;
}

Specify in the font-family you want. Example:

#site-title a {
    font-family: 'Verdana', sans-serif;
    color: #111;
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    text-decoration: none;
}
CHANGE FONTS FOR POST TITLES IN TWENTY ELEVEN THEME
The next place where you probably want to have a different font will be your Post Titles. To change the fonts for your post titles scroll down your Stylesheet to find the comment, ContentScroll down further to find these css codes:

.entry-title,
.entry-title a {
    color: #222;
    text-decoration: none;
}

Add in the font family you want to use. Example:

.entry-title,
.entry-title a {
    font-family: 'Georgia' , serif;
    color: #222;
    text-decoration: none;
}

CHANGE FONTS FOR NAVIGATION LINKS IN TWENTY ELEVEN THEME
The final place where one would like to have a different font would be the Navigation Menu. To change the fonts for the navigation links scroll down to find the comment, Menu

Under that find these codes:

#access a {
    color: #eee;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
}

Add the font-family you want. Example:

#access a {
    font-family: 'Georgia', serif;
    color: #eee;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
}

USING FANCY GOOGLE FONTS FOR TWENTY ELEVEN THEME
To take things a little bit further, you can use fancy fonts from Google Webfonts for the Twenty Eleven Theme. Follow these steps:

Go to Google Webfonts and choose the fonts you want.

Click “Add To Selection”.

Click “Use”

In the 3rd table, click the “@import” tab

Copy the string of codes provided. My example using the Meddon font, looks like this:

In the fourth table beneath, copy the font family name and paste it in Notepad for later use.
Go back to your Theme Editor – Stylesheet
At the top most portion of the stylesheet, you will find a long paragraph that includes the Theme credentials, License info and the theme tags. Immediately AFTER the closing comment of that paragraph, denoted by this symblol, */
Paste in the string of codes you copied from Google Webfonts.
Find the location where you want to use the Google Fonts. If you want it as the Site Title, just replace the font family with the name of the fonts. If you do not remember, check your Notepad where you copied and pasted the names from Google Webfonts. Example fancy fonts for the Site Title:

#site-title a {
    font-family: 'Meddon', cursive;
    color: #111;
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    text-decoration: none;
}

CHANGE THE FONTS FOR THE CONTENT AREA IN TWENTY ELEVEN THEME
With the stylesheet open, scroll down till you see the comment, Global. Find these codes immediately below.

body, input, textarea {
    color: #373737;
    font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    line-height: 1.625;
}

Change the default font, Helvetica Neue to whatever you like. The 15px in front defines the size of the fonts. Increase or decrease the value if your font looks too bog or too small.

Since this is the global values, you will find that all the fonts have been changed to the one you specified. If you like it that way, you can keep it. Else, you can specify different fonts other areas individually.
Via:blogigs

Incoming search terms:

  • change main menu font on twenty eleven (1)
  • wordpress twenty eleven change h1 colour (1)
  • what are h1 h2 tags twenty eleven (1)
  • twentyeleven default paragraph font (1)
  • twenty eleven wordpress table anchor (1)
  • twenty eleven increase h1 (1)
  • Twenty Eleven change fonts google (1)

You May Also Like:

Find Us Facebook Twitter StumbleUpon google +1 Follow Me on Pinterest
Subscribe via Email
Top 10 SEO ForumsGoogle Panda RecoveryWordpress Pluginip address Facebook

>

Related Posts:

One Response to “How to Change Fonts For Twenty Eleven WordPress Theme”

  1. 1
    Best Small Business SEO Book Says:

    I do not even know how I ended up here, but I thought this
    post was great. I do not know who you are but definitely you are going
    to a famous blogger if you aren’t already ;) Cheers!

Leave a Reply