Jul
30
Google Font API Thesis and WordPress
So if you keep up on these things you’ll no doubt have heard that Google has released a pretty super nifty and cool new fonts directory which will effectively allow you use some very snazzy fonts in a very web safe way.
This makes me pretty happy since it’s always a pain to have to ignore high quality fontography in place of web safe fonts. Here’s a bit of background on the whole thing if you’ve missed it.
Google Blog Font Directory Post
Google Font Directory Preview Tool
I’m going to quickly cover how I integrated this into a WordPress theme which took all of about 5 minutes then how I integrated it into the ever popular Thesis Theme which I use on quite a number of sites which I own.
Before we dive in here are a few examples. First a non-Thesis example.
Before
After:
Non-Thesis WordPress Integration
- Go to The Google Font Directory Preview tool.
- Select your font and options.
- Go to your website.
- Crack open your header.php file.
- Add the following link (with the font details you’ve selected) into your file:
- Open up your style.css file in your WordPress theme.
- Depending on which CSS element you are looking to replace simply comment our your current font styling.
- Copy Paste and replace with the Google font preview tool.
<link href="//fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >
For Example:
<br />
body {<br />
margin-top: 0px;<br />
padding: 0;<br />
color: #4c4c4c;<br />
background-color: #F3ECC4;<br />
font-family: 'Cantarell', serif;<br />
font-size: 14px;<br />
font-style: normal;<br />
text-shadow: none;<br />
text-decoration: none;<br />
letter-spacing: 0.0em;<br />
word-spacing: 0.25em;<br />
line-height: 1.23em;<br />
background-image: url(images/bg.jpg);<br />
background-repeat: repeat-x;<br />
}<br />
Voila – easy as pie. You can see from the two screenshots below the difference this makes on your site. Much cleaner, more readable, and definitely more professional.
Now what about Thesis? Things are a little bit different there. So let’s dive right in – by the way, I’m not getting into the specifics of changing a CSS element in WordPress because well, this isn’t a WordPress tutorial site. I’m putting this up to be helpful.
If you’re having trouble figuring out how to change your theme CSS elements there are tons of WordPress tutorials out there that can help you out.
Thesis and Google Font Library Integration
Here’s the before of The Dusan Nedelko Foundation which is running Thesis:
And After (Ohhh, Ahhh, Ohhhh):
In a similar way to a normal WordPress theme this is pretty straight forward we just want to play nice with the way Thesis handles things.
Step 1 – Add the include into the section of the theme. I’m sure there are tons of ways to do this. I actually add head elements in a slightly different way than through the Document Head section in the Thesis admin.
Open up you custom_functions.php file and add the following:
<br />
// Add the include for the Google Font API's<br />
function google_font_api() {<br />
$goog = "<link href=\"//fonts.googleapis.com/css?family=Reenie+Beanie:regular\" rel=\"stylesheet\" type=\"text/css\" >\n";<br />
$goog2 = "<link href=\"//fonts.googleapis.com/css?family=Crimson+Text:regular\" rel=\"stylesheet\" type=\"text/css\" >\n";<br />
$goog3 = "<link href=\"//fonts.googleapis.com/css?family=Lobster:regular\" rel=\"stylesheet\" type=\"text/css\" >\n";<br />
echo $goog;<br />
echo $goog2;<br />
echo $goog3;<br />
}<br />
// Add the hook<br />
add_action('wp_head','google_font_api');<br />
Obviously you need to add the include for whichever Google font you want to add. You can also feel free to copy and paste the lines from the Google Font Directory Preview tool into the Thesis Site Options->Additional Scripts section.
Same deal I just prefer to keep things tidy in my own way.
Step 2 – Add the code to your custom.css to override whichever elements you want:
To change the site title:
<br />
.custom #header {<br />
text-align:center;<br />
font-family:'Reenie Beanie', serif;<br />
font-size: 22px;<br />
font-style: normal;<br />
font-weight: 400;<br />
text-shadow: none;<br />
text-decoration: none;<br />
text-transform: none;<br />
letter-spacing: 0.015em;<br />
word-spacing: -0.041em;<br />
line-height: 1.23em;<br />
text-shadow: 4px 4px 4px #aaa;<br />
padding-top: 0em;<br />
padding-bottom: 0em;<br />
}<br />
To change the body text:
<br />
body.custom {<br />
font-family:'Crimson Text', serif;<br />
font-size: 12px;<br />
font-style: normal;<br />
font-weight: 400;<br />
letter-spacing: 0.015em;<br />
word-spacing: -0.041em;<br />
line-height: 1.23em;<br />
}<br />
To change the sidebar headline text (this has my own custom styling in there and you can also add/remove whatever you want for style purposes):
<br />
/* Custom Widget Headers */<br />
.custom .sidebar h3{<br />
font-family: 'Reenie Beanie', serif;<br />
font-size: 24px;<br />
font-style: bold;<br />
font-weight: 400;<br />
text-shadow: 4px 4px 4px #bbb;<br />
text-decoration: none;<br />
text-transform: none;<br />
letter-spacing: 0.015em;<br />
word-spacing: -0.041em;<br />
line-height: 1.23em;<br />
text-align:center;<br />
border-top:1px solid #e48902;<br />
border-bottom:1px solid #e48902;<br />
list-style:none;<br />
margin:0px;<br />
padding-top:5px;<br />
padding-bottom:5px;<br />
background:#eee;<br />
width:100%;<br />
margin-bottom:5px;<br />
color:#353535;<br />
}<br />
There you have it – as you can see below on my brother’s memorial foundation website: The Dusan Nedelko Foundation the changes make a really nice addition to the site, increasing the styling while remaining nice and simple.
Hope that was helpful and let me know if you have any thoughts, comments, rants, raves or whatever.
Pura Vida.
Danno
Whatchu Talkin’ About?