My Experience with Google Web Fonts (all 280+ of them)

0 replies
  • |
I've recently implemented Google Web Fonts into my WordPress theme and wanted to share my findings.

If you are unfamiliar with Google Web Fonts, a bit of background on the current state of fonts on the web...

As you probably know, most 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 the widespread support for @font-face, 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, with potentially adverse readability and layout 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

Not to overstate it, but this is a important, watershed moment for web design and usability.

Not surprisingly, 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. The killer feature that sets Google's implementation of web fonts from the other contenders is ease of use. Its really no contest how brain dead simple they made it.

I've implemented the entire 280+ fonts from the Google web fonts library into my WordPress theme and I'm happy to report that its working flawlessly thus far. Users are able to select a font via point and click and they can also see a preview of the font as they select them.

Once they settle on a font and click "Apply Changes" to save the theme options settings, I insert the google web fonts "link" tag into the theme's header.php:

HTML Code:
<link href='' rel='stylesheet' type='text/css'>
...and insert a single line of custom css to the theme's built in css stylesheet like so:

So, when the site visitor requests a page, the font is loaded in the <head> section of the theme, then the css stylesheet it loaded, telling the browser to convert the site title, tagline and heading level elements to the chosen web font (in this case, Oswald, which is one of my current favorites)

The only potential downside to using @font-face is that there is a potential for the FOUC effect

FOUC (flash of unstyled content) is an effect that's sometimes visible on slower connections, and manifests just before the font replacement occurs. In ClickBump 5, I've minimized this effect by setting the replaced elements (site title, tagline and headings) to visibility:hidden in the <head> section, then, just before the closing body tag (where I defer all script loading for extra site speed), and after the fonts have loaded, I'm resetting those elements css back to visible. To the end user, it appears as a normal page load, without the potentially distracting FOUC.

Hope this helps others who may be interesting in leveraging Web fonts to enhance the look and professionalism of their WordPress sites.

Google Web Fonts, just a few months old now, are already changing the web in a dramatic way.
#changer #design #fonts #game #google #web

Trending Topics