Techniques for custom fonts in web design
(Disclosure: I want you to use easyimg. But I also want to know if easyimg solves your problem or not. It can be used to display custom fonts in your web design. But it might not be the solution you want to use. I’d like to know this in order to improve it or change it to meet your needs.)
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.
- 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.
- 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?
