post

How To Change Fonts For Twenty Eleven Theme

twenty-eleven-fonts

The Twenty Eleven Theme uses the Helvetica Neue as the main font. Except for some special areas like blockquotes and such, the Helvetica Neue font is used everywhere. 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 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.

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 plae where you probably want to have a different font will be your Post Titles. To change the fonts for your psot titles scroll down your Stylesheet to find the comment, Content

Scroll 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;
}

These are the 4 locations where most will like to have different fonts.

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:

@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;
}

The results will look very fancy like my test blog below.

fancy-google-fonts-for-twenty-eleven-theme

You Can Use Fancy Fonts From Google For Your Twenty Eleven Theme



Disclosure:
Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission.

advertisements
Divi WordPress Theme
728x90 V3