Get Real-Time Preview of Google Web Fonts on Any Website

You know Google is one of the best web companies out there, which has so many products and services like Google Plus, Google Blogger, and Gmail and so on. Google Fonts is one of them that works like charm on any site to make that more attractive.

In web design, font plays a vigorous role. There are so many CMS like Blogger, WordPress and more others, which come with tons of free and paid themes. Each theme looks great with specific font. For instance, the Elemin theme by Themify, looks great with Georgia, Point theme by Mythemeshop looks elegant with Droid Sans and so on.

Earlier, I have used different fonts on my theme. Even though a Google font takes more time to load than a regular font like Georgia, Calibri, Verdana and others, they look great with most of the free and paid themes. Even theme designers always try to use Google fonts to give their existing themes a different and more stunning look.

Nevertheless, if you are using a free theme or may be paid theme and you don’t have much understanding with different fonts, you can opt-in to Google web fonts. The entire process of implementing Google web fonts on any WordPress or Blogger site is pretty simple. You just have to head on to http://www.google.com/fonts, choose a font and add some lines of code.

However, when you don’t know which font will be fit perfectly, you have to try each of them after one by one. TypeWonder is such a great cloud based app that will let you check any google font in real-time on any site including yours.

How to get real-time preview of Google web fonts?

This is however very easy with TypeWonder. Go to the homepage of TypeWonder and enter your site URL.

Get Real-Time Preview of Google Web Fonts on Any Website

Then choose a font that you would like to use and click the Use! button.

Get Real-Time Preview of Google Web Fonts on Any Website

If you want to use the current font, click the Get Code button.

After that copy the corresponding code and paste that in particular area of your template.

Get Real-Time Preview of Google Web Fonts on Any Website

That’s all! Hope this tutorial will be helpful for you. You can also download the extension which works on Chrome.


Feel Free to share your thoughts in the comment section below.
Don't forget to follow us on Twitter, like our Facebook Fan Page and Add us to your circles on Google+ to keep you updated with the latest technology news, gadget reviews, launches around the world and much more
Tagged with