Inject Personality into Your Web Design with New Fonts

Font Examples

Photo by Stephen Coles. CC License.

For a while now designers and developers have been experimenting with different types of web font solutions, with the idea of improving the look and feel of a website design, injecting personality and its own identity. The aim is to try and move away from generic font types such as Arial, Trebuchet, Helvetica and Georgia.  In attempting to do this, many have explored such methods as changing the image background and hiding the ‘generic webfont’ using the CSS text-indent method, other methods which seemed to work (with a few drawbacks) were Cufon and sIFR.

The amount of work that went into including these methods was sometimes a bit tedious and risky due to licensing requirements (especially for Cufon) and in some cases these felt slightly bloated and somewhat ‘clunky’.  These methods didn’t really seem like they would pioneer in the alternative webfont resolution.

As the web has evolved, there’s been a higher demand for websites that use special font-types with unique lettering styles, which in turn has made room for two methods, both of which I use and love because of the simplicity and the amount of free fonts available.

Method 1 – Google Api Method

Google has introduced an easy way of using special fonts on your websites which is really cool and fool proof – as long as you have some CSS and xHTML skills.

The method we use in order to include these special fonts is as follows:

Visit: http://code.google.com/apis/webfonts/ (if you want to read their quick start guide) or the library direct on http://www.google.com/webfonts

Once there, you will be greeted with a list of fonts in many styles from serif, sans serif and handwritten plus a couple of experimental styles. Select the font you want. Once you’ve done this, you’ll be directed to a second page displaying what the font looks like. You will notice a ‘blue tab’ that says ‘Use This Font’, by clicking that, you’ll be provided by Google with some code (as seen below):

Copy the code into your website just before the closing tag. Once that’s in place you’ll need to call the linked font family using CSS. In Google’s example they style the h1 on the website.

h1 { font-family: ‘Podkova’, arial, serif; }

You can do this to any text elements within your site. I personally prefer to use it for small amounts of text and stick to regular fonts for large amounts of text.

Google’s method, is a very simple method with a limited library (it’s still growing and gets bigger day by day), it works for:
•    Chrome: version 4.249.4+,
•    Firefox: version: 3.5+,
•    Safari: version 3.1+,
•    Opera: version 10.5+
•    Microsoft Internet Explorer: version 6+.

So all-in-all there’s great browser support using this method, with the added benefit of not having to worry about font formats.

Method 2 – @font-face

This method is quicker than the first one, as all that is required is to put the following CSS in your stylesheet and upload your copy of the ‘free’ font sheet. Make sure you upload the font library to your live domain.

@font-face {font-family: HoneyScript-Light; src: url(‘HoneyScript-Light.ttf’); }

Then call it using font-family:

h1 {font-family: HoneyScript-Light;}

So as you can see both methods are very similar however the main difference is with @font-face you have a larger library of fonts you can use. But there are browser restrictions with the different types of formats they accept, so just make sure you are aware of this and create a fallback font.

@font-face Browser Support
IE 6+ Supports EOT formats
Safaro 3.2+ Supports TTF/OTF formats
iPhone 3.1+ Supports SVG formats
Chrome 4.0+ Supports TTF/OTF and SVG formats
Firefox 3.5+ Supports TTF/OTF formats
Opera 10 TTF/OTF formats

Check out http://www.fontsquirrel.com/ to see a HUGE collection of free fonts available for website design.

About the Guest-Blogger: Warren Jerzyszek is a Web Designer at Creare; a Web Design company that also specializes in SEO, internet marketing, e-commerce solutions and web video.
Related Posts Plugin for WordPress, Blogger...

Tags: , , , ,

Author:Guest Blogger

We support and encourage guest blogging. If you're interested, please email us at info@catholictechtalk.com