Google Font API Thesis and WordPress

Last Updated on December 14, 2022 by Dan Nedelko

So if you keep up on these things youll 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 its always a pain to have to ignore high quality fontography in place of web safe fonts Heres a bit of background on the whole thing if youve missed it

Google Blog Font Directory Post

Google Font Directory

Google Font Directory Preview Tool

Im 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

1. Go to The Google Font Directory Preview tool
2. Select your font and options
3. Go to your website
4. Crack open your headerphp file
5. Add the following link with the font details youve selected into your file

code<link href=fontsgoogleapiscomcssfamily=Cantarellregularitalicboldbolditalic rel=stylesheet type=textcss >code

6. Open up your stylecss file in your WordPress theme
7. Depending on which CSS element you are looking to replace simply comment our your current font styling
8. Copy Paste and replace with the Google font preview tool

For Example

code
body
margin top 0px
padding 0
color 4c4c4c
background color F3ECC4
font family Cantarell serif
font size 14px
font style normal
text shadow none
text decoration none
letter spacing 00em
word spacing 025em
line height 123em
background image urlimagesbgjpg
background repeat repeat x

code

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 lets dive right in by the way Im not getting into the specifics of changing a CSS element in WordPress because well this isnt a WordPress tutorial site Im putting this up to be helpful

If youre 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

Heres 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 Im 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 functionsphp file and add the following

code
Add the include for the Google Font APIs
function google font api
$goog = <link href=fontsgoogleapiscomcssfamily=Reenie+Beanieregular rel=stylesheet type=textcss >n
$goog2 = <link href=fontsgoogleapiscomcssfamily=Crimson+Textregular rel=stylesheet type=textcss >n
$goog3 = <link href=fontsgoogleapiscomcssfamily=Lobsterregular rel=stylesheet type=textcss >n
echo $goog
echo $goog2
echo $goog3

Add the hook
add actionwp headgoogle font api
code

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 customcss to override whichever elements you want

To change the site title

code
custom header
text aligncenter
font familyReenie Beanie serif
font size 22px
font style normal
font weight 400
text shadow none
text decoration none
text transform none
letter spacing 0015em
word spacing 0041em
line height 123em
text shadow 4px 4px 4px aaa
padding top 0em
padding bottom 0em

code

To change the body text

code
bodycustom
font familyCrimson Text serif
font size 12px
font style normal
font weight 400
letter spacing 0015em
word spacing 0041em
line height 123em

code

To change the sidebar headline text this has my own custom styling in there and you can also addremove whatever you want for style purposes

code
Custom Widget Headers
custom sidebar h3
font family Reenie Beanie serif
font size 24px
font style bold
font weight 400
text shadow 4px 4px 4px bbb
text decoration none
text transform none
letter spacing 0015em
word spacing 0041em
line height 123em
text aligncenter
border top1px solid e48902
border bottom1px solid e48902
list stylenone
margin0px
padding top5px
padding bottom5px
backgroundeee
width100
margin bottom5px
color353535

code

There you have it as you can see below on my brothers 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

Dan Nedelko

Dan Nedelko is human being spinning around on this big blue marble with the rest of you, interested in Media // Music // Art // Family // Business // Founder of Honeypot Marketinghttp://hny.pt, Jacohmi, and Genuine Media & Development.

See Full Bio