@Font-Face and Live Text versus Images

Traditionally in web design if you wanted to dress up your fonts beyond  Times New Roman or Arial you needed to jump into Photoshop and create that content as an image. While this looks great, search engines can not see this information as literary content, and therefore have no idea the subject matter of your site. Back in the day search engine ranking was not as sophisticated and therefore there were ways into tricking the search engines to ranking your page. This  is not necessarily the case anymore and therefore utilizing any and all methods of optimization is advantageous in making your website stand out from the crowd. Thankfully we no longer need to rely on only images to utilize non system fonts in our web designs and achieve visually stunning text. How do we do this? Face Fonts!

What is @FaceFont?

With the utilization of Face Fonts we are able to host non-system fonts on the web and allow users to access them while viewing out websites. With the combination of FaceFonts and new CSS3 text effects, we can achieve some very dynamic and stunning text styling.

Example

Two  great examples of websites that utilize live text well  are  www.findcalgaryrealestate.ca and www.polarissells.com

I want to use @face-font

The basic implementation of your css will look something like this:

@font-face {
font-family: 'YourFontFamily';
src: url('fonts/your-font-file.eot');
src: local('☺'), url('your-font-file.woff') format('woff'), url('your-font-file.ttf') format('truetype'), url('your-font-file.svg#webfontVGQMH9n0') format('svg');
font-weight: normal;
font-style: normal;
}

The above code will have to be altered for your specific font and the file locations but that should get you started.

.FontClass {font-weight: normal; font-style: normal; line-height:normal; font-family: 'YourFontFamily', sans-serif;}

This is how you can call your defined font in a basic css class.

For some great @FontFace resources and actual fonts check out:

http://code.google.com/webfonts – google host a number of fonts that you can reference directly off of their servers. Although this library is currently limited, as with all things google it will no doubt be the definitive force in the @facefont world in the not to distant future.

http://www.fontsquirrel.com/ – Font Squirrel allows you to take any font you have on your local machine and upload it to their website which then converts it into the proper formats, and gives you neat and tidy code for easy implementation into your website.