Keep SEO In Mind While Maintaining Sleek and Sexy Design
Friday, April 8th, 2011@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.
On April 21-23, I had the pleasure of attending and speaking at the 
Talk about sexy – a true rock lounge was created on Sept 9th in Edmonton and the energy was electrifying! Thank-you to all our Rock Lounge attendees for making this event so wonderful! Some of the photos are now up on our website, 
We must say that the combination of Carbon Environmental Boutique’s unique and stylish location, the fashion that was really made out of garbage, d’lish’s truly delicious bites, as well as the beautiful and wonderful attendees really made this event one hot eco-inspired night.
We are excited to announce that Carbon Environmental Boutique will be giving a sweet Surprise Giveaway to one of our lucky members! Carbon strives to help people in Edmonton create “beautiful, healthy living spaces that can reduce negative impact on the environment without sacrificing aesthetics”. Take a look at their store in person or at 
We hope that Shelley, Samantha, and Jim enjoy their new Alberta Venture subscriptions!