How to Use Google Font Directory on Thesis WordPress Theme

• Tweet
• Email

• Tweet
• Email

Google Font Directory has recently been launched to set the new standards in custom webfonts typography on blogs. This comes with an specially on WordPress blogs which are quite easy to get benefit of this amazing feature.

Original idea of Google Font Directory belongs to the TypeKit who offers lot more fonts than Google right now.

How to Use Google Fonts Directory

Thesis wordpress theme comes with a very basic way to get used of some additional scrips and custom CSS. These two areas will be touched in this simple thesis customization tutorial.

As a first step browse to Google Web Fonts Directory and select your font. Once you are done with this simply click the font and you will taken to the dedicated font’s page.

For the sake of this tutorial I have choosen Cantarell font. This page will let you get the full preview of font. From online specimen to variants, character set and description.

How to Customize Google fonts Further

To customize your font further easily click on Get Code tab and tick the boxes of Bold, Italic etc as per your styles. In the end a final code will be generated to be embedded in your site.

Advanced Settings Page – To customize your font further more with advanced settings to get a professional look. You can check out the Font Preview page.

How to Embed Google Fonts in Thesis WordPress theme

Once you are done with your styling of web font. Copy the generated code and paste into your additional scripts box in Thesis site options.  And for adding CSS move to the next step.

Next and last step is to set custom CSS for your Google web-font to be appeared in Thesis. As you know to add custom CSS in thesis, you can always add new styles via Custom File editor.

Make a little change to designate the font style to the required text CSS entry. Here we have changed .headline_area h1

Save your changes in editor and observe the new web-fonts on your site.

Live Example

As a live example I would like to present this blog Post Titles. We have changed the default Thesis theme with Google Web Font. Our selection is Yanone Kaffeesatz by Yanone, and sub headlines as Molengo by Denis Jacquerye

Do tell about this tutorial did you liked it ? We have tried our best to make everything clear to implement Google Fonts to your sites easily.

Helpful article? Follow me on Twitter (@3rdbrain) or become our Facebook fan for all the latest updates! or Get Free Email Updates