Google Web Fonts
My website can have “pretty” fonts? Oh MY!
I’ve been doing commercial websites since 1997, but started hacking around a year or two earlier. And let me tell you, I’m about sick of some Arial, Verdana, Times New Roman and, up to this moment, my most used, Tahoma fonts. Sure, they’re universally compatible, but man, everything looks the same. Boring. Boring. Boring.
I did a test/play website a LONG time ago for Lizard Lick – I needed a test site and since I LIVED in Lizard Lick, I figured it would be a great test site. With a name like “Lizard Lick”, it only made sense to want a font that perhaps reflected the “redneck” of the area. And I found such a font. That website is long gone, but I believe, in order to get it to display correctly for visitors, I had to put a download link for the font file with instructions on how to install it. NOT real handy. It generated as many emails about not being able to install the font properly as it did visitors. It was just beyond the capabilities of most people. And I doubt ANYONE other than me actually HAD that font installed natively.
For those that don’t know, a web developer/designer can put ANY font that they want in a web page. Now, whether it will display properly is a different story. IF the visitor actually HAS that font installed, then it will display as the designer intends. Normally, the CSS will read something like
font-family: Verdana,Arial,sans-serif;
The web browser will use the first font that it comes to that it actually can render. So if Verdana isn’t installed, the browser will use Arial. If Arial isn’t there, it trickles down to the universal ‘sans-serif’. The sans-serif in this case is the lowest common denominator. One has to remember that visitors will be coming in on PCs, Linux browsers, Macs, droids and iPhones, etc. And they don’t necessarily have all the same fonts installed. Sans-serif is basically the fail-safe font that will render in anything.
In 1996, I finally decided that there really was no way around this particular issue. Over the years, I have occasionally revisited this topic and did some searching on any improvements to this capability. And a few days ago, I noticed something about Google Web Fonts. I think I’d actually seen the phrase a few times, but I didn’t really have time to dig into the font presentation thing.
Well, this morning after a few days away from the computer, I DID do some digging. There was the paid TypeKit font manipulation package. Last time I checked, they were in some sort of testing or it was not real efficient – either way, reviews were a bit sketchy still. Looks like they’ve got it going now.. but still, at a minimum of 49/year for what I need – and a recurring bill that I would eventually likely either forget or get sick of – and consequently end up either reconfiguring a lot of CSS down the road or having a lot of ticked off customers, this was NOT the way to go. Hey, what’s this? That Google Webfonts thing… I’ve seen that before – time to check it out.
Sure as heck – finally the way to manipulate my website fonts! With over 200 fonts in the Google web fonts beta, by golly, there should be something there for whatEVER site I wanted to create. Granted not every site really requires fancy fonts or pretty fonts – some really NEED to be Arial, Verdana, etc, but for those that do? THIS is the answer.
The one thing that frequently bothers me about Google is that things are often “Beta” – meaning that they aren’t officially supported. I don’t know what the rationale is behind leaving things in Beta for extended periods, but this IS still “Beta”. Maybe they decided after seeing how much usage a particular app gets, Google decides to actually finish it off. Anyway… Google Web Fonts.
Getting Google Web Fonts Configured..
Welcome to Google Web Fonts
Choose your font - I chose "Yanone Kaffeesatz"
With Quick Use, you get here - select the styles you want.
You can use various styles of the font – there is a handy little “How much is this going to slow my load times” graphic on the right that will give you some idea of the hit your site load time will take. Be aware that the more fonts and styles that you use, the more load time WILL increase. DON’T blanket add in all the fonts that you can. Select carefully.
Choose characters and get import code
Further down on the Quick Choose page, you have more options and some embed code. In some fonts you have Cyrillic options I understand – I use Latin – so it’s immaterial here. You can grab the code needed for your particular need in the 3. area – I am using this for a WordPress site, so I used the @import version for including the code into a style.css page. Standard allows you to pop it onto any web page. And Javascript – this is part of the WebFont Loader Javascript library. It indicates that you can have further control of the fonts with this method – but in my case – I’ve got what I need with the @embed code for now. Maybe later we’ll get fancier…
So for now, just copy the @embed code if you too are using this with WordPress.
Google Web fonts - CSS integration
Here you’ll need to modify the CSS code to meet your needs. I personally grabbed the style.css file from my WordPress theme into a text editor and then did a global replace by replacing the Tahoma, with 'Yanone Kaffeesatz',Tahoma, Your implementation will obviously differ. Do note that when you LOAD the font a couple steps above you use the font name with a “+” in place of any spaces in the font name. When actually USING the font in CSS, you use the spaces as you would expect.
Google Web Fonts - style.css integration
And finally, for WordPress, push the code back into the Appearance => Editor (style.css) and update the file. Do a <SHIFT> reload and you should be good to go!
I am going to do some experimenting with this, but I suspect with the caching plugins I use, there should be minimal impact to the blog.
My blog font looks sweet. Love it. Google Web fonts – changing the way I do websites!
Follow
