(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).
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?
Research for using custom fonts in your web design
If you’re a regular reader of Smashing Magazine, you should start seeing our first ad buy for EasyIMG very soon! We love Smashing Magazine and we think their readers will love EasyIMG.
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!
Developers usually make crappy marketers and we’re no different. But we’re trying to make amends. It’s tough to balance the desire to build cool new functionality and the need to tell people about said features. We’re learning….slowly.
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.
Converting some text to an image is EXACTY the problem that EasyImg solves. But that’s just 1 user story that it addresses. It’s an internet graphics engine (IGE) that has many options, all accessible via HTML’s IMG tag. So if you want to convert a few lines of text to a png, gif, or jpeg image; or create a whole web site design, EasyImg can handle it.
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.
EasyImg was initially created to convert text to images. We wanted to solve the problem of using special fonts for text on web pages consistently across the most popular web browsers. We quickly realized that this service was so much more, like for rounded corner background images.
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.
So here’s the guts of this post. Loading images from different domains can make your web page load faster because the browser will download resources (e.g. images) in parallel from different domains (Performance Research, Part 4: Maximizing Parallel Downloads in the Carpool Lane). Since EasyImg is a different domain than your web site, using EasyImg for your images will give you faster page loads.
We’re ramping up for our 1st product (EasyImg) launch. We’re excited. We hope you will be too. It’s a web service that generates graphics from a url. Check it out->www.easyimg.com
