Using non web standard fonts in web design is hard.  Not because it’s technically impossible, but because of browser differences and copyright issues with font distribution. All other modern browsers take a different approach from using IE’s proprietary font file format EOT for font embedding. But they can all link to fonts.

• Use CSS’s @font-face (embeddable fonts)

  Including a custom font in your design using CSS’s @font-face property with the src attribute linking to the font  makes sense and follows the principle of separation of responsibilities well. It’s supported by modern browsers. Here’s an example on how to do it (CSS @ Ten: The Next Big Thing).

  @font-face {
  font-family: "Kimberley";
    src: url(http://www.princexml.com/fonts/larabie/ »
    kimberle.ttf) format("truetype");
  }

  You can then use the Kimberley font in your CSS definitions. However, I think the major roadblock in this technique right now is when you use commercial fonts that don’t allow for web distribution in their licenses. This technique results in the browser downloading the file to the users’ computer thus distributing it, infringing on the license. So for fonts that allow this use, I think this should be your first approach.

• Javascript + Server component for font conversion + VML/SVG/HTML5 Canvas

  If you want to support older browsers, implementing typeface.js or cufon would be your next approach. These implementations require linking to their javascript library and converting the font that you want to use into a javascript representation of it. However, these solutions may still infringe on commercial font licenses since they distribute a javascript representation of the font which exposes the font for modification.

• Image Replacement

  The last technique uses images for your text. You can create an image with the custom font and either include it inline with the markup or set the background in CSS of the DOM element to the image. I think the main limitation of this technique is that it’s not practical to display lots of text this way. I don’t think you’d want to display your whole article as an image. But for short text like headlines and marketing  messages, this is practical. In addition, this doesn’t distribute the font so it complies with commercial font licenses.

  Here are 2 approaches to implementing the image replacement technique.

  1. You can just create an image and include it inline with the markup. Bad for SEO since the text is not readable by search engines.
  2. You can create an image and set the DOM elements background to it via CSS. Good for SEO since the text is still in the markup.

  I think the 2nd technique is the best out of the two since it allows you to include the text in the markup, making it more SEO friendly.

What technique do you prefer and use? Why do you use one over the other? Do you even use custom web fonts in your design?

Research for using custom fonts in your web design

• Ubiquitous web font embedding just got a step closer
• Rendering text with javascript and typeface
• Using cufon for custom fonts
• How to use @font-face in CSS
• Which browsers support font embedding

We’re excited to get the word out about, what we think, is an awesome product. We want people to know about our Internet Graphics Engine. So far in our own development efforts, it’s been a real winner. It saves gobs of time and produces crisp, clean, beautiful images that make our sites look sweet.

If you find it half as useful as we do, EasyIMG will change the way you approach web development. Sign in with your Google id and let us know what you think!

We’re looking for advertising space. We want to reach out to designers and developers across the web and tell them about our Internet Graphics Engine. We think EasyIMG will revolutionize the way web apps are written and we need to tell the world.

If you have any advertising or marketing suggestions, let us know.

Thanks!

http://images.easyimg.com/3f0e28df/gc-848484/t-Click%20here/bc-cacaca/pl-5/pr-5/pt-3/pb-3/bold/c-333333/bw-1/bg.png

results in this:

EasyImg button with a gradient

Welcome to the EasyImg blog.  We recently launched this blog site in order to host additional information helpful to our customers and people like you. Very soon we will be posting some very informative video tutorials on how to effectively use EasyImg in your software development.

Please post a comment and check back real soon!

Cubicle5′s EasyImg team

This is an example of a rounded corner background image that’s generated by EasyImg.

Check out other possible uses for EasyImg at the samples page.