With the latest update of ClickBump 5, the WordPress theme that runs ClickBump Express, Express with JumpStart Pro and BizLocal, I’ve integrated full support for Google Web Fonts via point and click. Here are a few examples to give you a quick taste of what this is all about…
Above: “Magnetic” template skin using google web font: “Kreon”
Above: “Gadget” template skin using Google web font “Annie Use Your Telescope”
Above: “BlackJack the Ripper” template skin using google web font: “Nosifer Caps”
If you are unfamiliar with Google Web Fonts, a bit of background on the current state of fonts on the web
99% of all websites use one or two of only a handful of “Web Safe” font families. These are the 6-10 fonts that are common between Macs and PCs and include fonts like Arial, Times, Courier, Verdana, Georgia, and a few others. The reason for this is that prior to this development web pages were limited to only using those fonts installed on your computer (or tablet, cell phone or other device) when viewing web sites. So, If you didn’t have the font that the site designer specified, the site could render in a manner that the designer did not intend. This could result in adverse layout or readibility issues when interacting with the site.
Modern browsers support for @font-face make Google Web fonts possible
With the enhancements of modern web browsers, including Google Chrome, Mozilla Firefox, Apple Safari, Opera and Microsoft’s IE7-9*, and specifically, their support for web fonts in the form of the @font-face CSS property, designers can now specify almost any font they wish, taking the web one step closer to the design asthetics of the print world, but with all the advantages of the interactive medium that is the web. *interestingly, IE has supported @font-face since 1998
In short, this is a huge, watershed moment for web design and usability. Not suprisingly, Google has taken full advantage of the opportunity by offering a freely available library of over 270 designer quality web fonts (and growing) that web site owners can use in their sites.
ClickBump 5 is one of the first WordPress themes to integrate Google Web Fonts without need of a Plugin and without requiring code copy and paste
Take a look here at Google’s Web Fonts Viewer to check out all thats available for you right now on your existing web sites running ClickBump 5.
Ok, now that you know what Web Fonts are, let me introduce you to one of the coolest new enhancements to the ClickBump theme, perhaps since I introduced the automated ad rotation feature:
I’ve integrated Google Web Fonts in a very big way. You don’t have to use them, but if you would like to take advantage, you can dramatically improve the look and feel of your web site, with just a couple of mouse clicks. There is no code to learn and nothing to copy and paste!
Just go to “ClickBump 5 > Misc > Headline Fonts” and click “Enable”. Then, choose a font from the Google web fonts pulldown menu and you will instantly see a preview of a line of text set in that font. When you find one you like, just click “Apply Changes” and preview your site. That’s all there is to it!
You will see that your Site Title, Tagline and h1-h6 level headings are automatically drawn in the font you’ve chosen.
You can also specify a letter-spacing value if you would like to extend or condense the font to best suit your tastes.
Have fun with Google Web Fonts and please give me your feedback here on what you think of this exciting new feature. Here are a few more examples:
Above: “Blue Halloween” template skin using Google Web Font: “Eater Caps”
Above: “CTR-Plus” template skin dressed in Google Web Font: “Cuprum”
Above: “Amaze” template skin dressed in Google Web Font: “Oswald” (my personal favorite)
Above “Velocity” template skin dressed in Google Web Font: “Nova Slim“