Last Updated on December 14, 2022 by Dan Nedelko
<p>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<p> <p>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<p> <p><a href=httpgooglecodeblogspotcom201005introducing google font api google fonthtml>Google Blog Font Directory Post<a><p> <p><a href=httpcodegooglecomwebfonts>Google Font Directory<a><p> <p><a href=httpcodegooglecomwebfontspreviewfont family=Cantarell>Google Font Directory Preview Tool<a><p> <p>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<p> <p>Before we dive in here are a few examples <strong>First a non Thesis example<strong><p> <p>Before<p> <p style=text align center><a href=httpsdannedelkocomwp contentblogsdir1files201007screen capture 919jpg><img class=size medium wp image 776 aligncenter src=httpsdannedelkocomwp contentblogsdir1files201007screen capture 919 300x223jpg alt=screen capture 919 width=300 height=223 ><a><p> <p>After<p> <p style=text align center><a href=httpsdannedelkocomwp contentblogsdir1files201007screen capture 921jpg><img class=size medium wp image 777 aligncenter src=httpsdannedelkocomwp contentblogsdir1files201007screen capture 921 300x207jpg alt=screen capture 921 width=300 height=207 ><a><p> <h2>Non Thesis WordPress Integration<h2> <ol> <li>Go to The Google Font Directory Preview tool<li> <li>Select your font and options<li> <li>Go to your website<li> <li>Crack open your headerphp file<li> <li>Add the following link with the font details youve selected into your file<li> <p>code<link href=fontsgoogleapiscomcssfamily=Cantarellregularitalicboldbolditalic rel=stylesheet type=textcss >code<p> <li>Open up your stylecss file in your WordPress theme<li> <li>Depending on which CSS element you are looking to replace simply comment our your current font styling<li> <li>Copy Paste and replace with the Google font preview tool<li> <ol> <p>For Example<p> <p>code<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 00em<br > word spacing 025em<br > line height 123em<br > background image urlimagesbgjpg<br > background repeat repeat x<br > <br > code<p> <p>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<p> <p>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<p> <p>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<p> <h2>Thesis and Google Font Library Integration<h2> <p>Heres the before of The Dusan Nedelko Foundation which is running Thesis<p> <p><a href=httpsdannedelkocomwp contentblogsdir1files201007screen capture 922jpg><img class=size medium wp image 778 alignnone src=httpsdannedelkocomwp contentblogsdir1files201007screen capture 922 300x164jpg alt=Dusan Nedelko Foundation Running Thesis width=300 height=164 ><a><p> <p>And After Ohhh Ahhh Ohhhh<p> <p><a href=httpsdannedelkocomwp contentblogsdir1files201007screen capture 927jpg><img class=size medium wp image 780 alignnone src=httpsdannedelkocomwp contentblogsdir1files201007screen capture 927 300x159jpg alt=Dusans Website with Thesis and Google Fonts width=300 height=159 ><a><p> <p>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<p> <p>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 <strong>slightly different way than through the Document Head section in the Thesis admin<strong><p> <p>Open up you custom functionsphp file and add the following<p> <p>code<br > Add the include for the Google Font APIs<br > function google font api <br > $goog = <link href=fontsgoogleapiscomcssfamily=Reenie+Beanieregular rel=stylesheet type=textcss >n<br > $goog2 = <link href=fontsgoogleapiscomcssfamily=Crimson+Textregular rel=stylesheet type=textcss >n<br > $goog3 = <link href=fontsgoogleapiscomcssfamily=Lobsterregular rel=stylesheet type=textcss >n<br > echo $goog<br > echo $goog2<br > echo $goog3<br > <br > Add the hook<br > add actionwp headgoogle font api<br > code<p> <p>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<p> <p>Same deal I just prefer to keep things tidy in my own way<p> <p>Step 2 Add the code to your customcss to override whichever elements you want<p> <p>To change the site title<p> <p>code<br > custom header <br > text aligncenter<br > font familyReenie 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 0015em<br > word spacing 0041em<br > line height 123em<br > text shadow 4px 4px 4px aaa<br > padding top 0em<br > padding bottom 0em<br > <br > code<p> <p>To change the body text<p> <p>code<br > bodycustom <br > font familyCrimson Text serif<br > font size 12px<br > font style normal<br > font weight 400<br > letter spacing 0015em<br > word spacing 0041em<br > line height 123em<br > <br > code<p> <p>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<p> <p>code<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 0015em<br > word spacing 0041em<br > line height 123em<br > text aligncenter<br > border top1px solid e48902<br > border bottom1px solid e48902<br > list stylenone<br > margin0px<br > padding top5px<br > padding bottom5px<br > backgroundeee<br > width100<br > margin bottom5px<br > color353535<br > <br > code<p> <p>There you have it as you can see below on my brothers memorial foundation website The <a href=httpdusansfoundationorg>Dusan Nedelko Foundation<a> the changes make a really nice addition to the site increasing the styling while remaining nice and simple<p> <p>Hope that was helpful and let me know if you have any thoughts comments rants raves or whatever<p> <p>Pura Vida<br > Danno<p>
Very cool, thanks for posting!
Hi,
Unfortunately, your code is full of HTML tags and won’t parse. You need to remover those and just present a flat text file or everyone that tries to use it will have the same problem.
Terence.
Terence,
The syntax highlighter copies and pastes just fine for me (and many others). If you highlight the code in the boxes and paste them into TextMate, BBEdit and any other text editor. Hope that helps.
– Dan