Google Web Fonts – Typography Tool

Select from top any Google Web Font, apply the style with live preview and get the CSS code for your project… Introducing the all new Google Web Fonts Optimizer

This tool has been developed to help you implement Google Web Fonts on your website of Blog. But why use this tool? After all, Google has such a useful website for web fonts?

Best Google Web Fonts

Here I am saying the best Google Web Fonts… because there are 624 fonts available in Google web fonts directly at this time (and counting…). If you want to use Google Fonts in your website or blog, it can be a difficult task for you to look out for the perfect font combination from these 624. So, I have hand picked some of the best fonts which you can select from the drop down list. And as you change the selected font, you get the real time preview making it easier to visualize and select.

But no limitations, you have the option to include any web font from Google font directory. Just select the name of font from the drop-down and it will get included in the list. Not a big deal!

CSS Typography

Once you have done selecting the right font, its time now to add some style. You have the option to decide on font-size, font-color, background color, letter spacing, word spacing and line height. As you change these parameters with sliders, you get the live preview which will help you to decide on the perfect style for your typography. Additionally, you have the option to add the text-shadow effect. But as you know, being a CSS3 property, text shadow is not supported by older browsers and current version of internet explorer. No harm though, on these browsers, you get the text without shadow.

At last, you can do fine tuning by changing the font weight, emphasis, alignment, etc. to make your typography exactly as per your need.

Real Time CSS Code Generation

So, you have done a lot of hard work to get the perfect web typography for your website! So, go and grab the CSS codes – one for the web page and other for your CSS file. Include it in your project and you get the same effect… It’s that simple.  Let’s thank Google for providing us free and wonderful fonts collection. And this tool will definitely save you a lot of time.

I am trying to figure out how the complete font list can be provided on the same page for selection so that you don’t need to remember the names. Meanwhile, I will keep on updating the available font list with top web fonts.

I would love to hear about any idea or feedback which can make it even cooler! If you have any please share that here.

Click here for Web Fonts Optimizer

Update: I have now created the Posters of Google Web Fonts. You can quickly preview and select the fonts to use in the Web Fonts Optimizer.

Leave a Reply

Your email address will not be published. Required fields are marked *