Archive for November 16th, 2011

I love to see your smiling (@font-)face!

Wednesday, November 16th, 2011

@font-face exampleFor those of us who build web sites for a living, (and for those who like to dabble), the days of being limited to a handful of available fonts are fading into the sunset. A new day has dawned and the choirs of angels are singing. Ok ok, the technology has been around for a while, but the browsers are finally catching up. I’m speaking of my personal favorite, the @font-face CSS method of incorporating custom fonts into your web design. Halle-freaking-lu-JAH!!!!!!

The @font-face method only requires a few lines of CSS and is therefore very easy to use without any third party tools. There are a number of free-font sites as well as commercial options available via services such as Google, Adobe and MyFont.com. The typeface possibilities are now endless, but not without proper testing. The “gotcha” is that certain fonts will render slightly different when testing cross-browser and cross-platform, so one must have a fall-back solution when testing to ensure that your your chosen font(s) works with all browsers (mobile browsers included) and all platforms. What looks right in Illustrator may not look the same on your website. Some fonts play nice, some don’t. Also, one must consider rights, usage and fees when using copyright protected fonts on your site.

In short, be sure to do your homework, test your designs, obey the (copyright) law and pump out those beautiful website designs!

Have fun!
Mark Maack, Web Services Manager

Squid Ink Blog is proudly powered by WordPress
Entries (RSS) and Comments (RSS).