Help Your Brand Stand Out Online By Using Web Fonts

Recently I updated our website with a new look that included a web font. Web fonts are great. They allow designers to carry over the look and feel of print pieces to the web. I have been using web fonts for a while on various clients’ websites.

Those web fonts were achieved using a site called Cufon. Cufon is a really nice alternative to buying a web font version of the font you use for your company. The way Cufon works is that it “consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.” If you would like to learn more about Cufon click here. Two more ways to use web fonts on your website are to use Typekit or to buy the web version of the font you want to use and load it onto your server. Typekit is a subscription-based library of high-quality fonts that was built around web standards. The library is hosted by Typekit so all you have to do is add a line of code to your page and it will pull the font. Another exciting element is that Typekit integrates with some open source web applications. “We are also actively integrating Typekit into hosted platforms—such as WordPress, TypePad, and Posterous—so that anyone with a website can use real fonts.” Learn more about Typekit here. Not all of the fonts out there have a web version, but with sites like Cufon or Typekit you can get the font or at least pretty close to the original font used in a printed piece. If you are able to have a web version of the font you use then you can load that font onto your server and call it from your CSS (cascading style sheet) for any specific tag you want. It’s that simple. For example we use the web font Gibson for our website. We purchased the web version of this font from MyFonts, and then followed the instructions they included with the download to load it onto our server, add code to our pages to include a reference to the files, and finally make a call to those files through the CSS. Here are some examples of what the CSS styles could look like: To assign the font to the entire site use the body tag in your style sheet: body { font-family: Gibson-Regular; } If all of the headings should be formatted using the web font, then use the h1 – h5 tags: h1, h2, h3, h4, h5, h6 { font-family: Gibson-SemiBold; font-weight:normal; Font-style:normal; } Web fonts are a great way to carry a look and feel through to the web from print. They help keep your brand consistent across different mediums and help you stand out from the competition. If you would like to learn more about the importance of fonts, check out the post “The Power of Fonts” from Tim Burkhalter, our VP of Creative.