In my previous posts, I have explained to add sidebar and to change the width of the 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 take place in the Twenty Eleven Stylesheet. In your WP Dashboard, go Appearance – Editor – Stylesheet (style 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 Stylesheet to find the comment Headings
Immediately below you will find these CSS codes.
clear: both;
}
Add in the font-family you want to use. Example;
font-family: ‘Georgia’, serif;
clear: both;
}
This will affect all font wrapped in the H1 to H6 tags which include 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
color: #111;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
Specify in the font-family you want. Example:
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 a {
color: #222;
text-decoration: none;
}
Add in the font family you want to use. Example:
.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:
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}
Add the font-family you want. Example:
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 make things a little bit further, you can use fancy fonts from Google Webfonts for the Twenty Eleven Theme. Follow these steps:
Go to Google Web fonts 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 Maddon 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 topmost 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 symbol, */
Paste in the string of codes you copied from Google Web Fonts.
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 Web Fonts.
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 value, 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 in other areas individually.
Via:blogigs