In my previous posts i have explained to add sidebar and to change the width of twenty eleven wordpress 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;
}
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:
|
1
|
@import url(http://fonts.googleapis.com/css?family=Meddon&v2); |
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
Follow @technotrait
| Top 10 SEO Forums | Google Panda Recovery | Wordpress Plugin | ip address Facebook |




June 25th, 2012 at 9:27 pm
I do not even know how I ended up here, but I thought this
Cheers!
post was great. I do not know who you are but definitely you are going
to a famous blogger if you aren’t already