Blog

All thoughts and opinions in my blog are my own and do not represent the position of my employer.

Roundup of Font Embedding and Replacement Techniques

This post was last updated February 2010

Although @font-face, the CSS method for embedding and using any font in a web page, now enjoys rather good browser support, it still has some limitations that keep people from using it. Chief among these is the fact that the license of most fonts, even free ones, do not allow re-distribution over the web using @font-face. Because of this, a number of services and technologies are springing up that provide alternate ways to get non-standard fonts into your pages. I was unable to find any place that listed all of the major @font-face alternatives, so I decided to do my own roundup to provide the basic info on each.

This roundup of alternatives is not meant to discourage the use of @font-face. In the spirit of progressive enhancement, I wholeheartedly think it’s ready to use (with the right fonts, of course). But, in case you are unable or unwilling to use a pure @font-face solution, or you’re just curious what your other options are, here’s are the most popular services and techniques out there for you right now.

Note: This a rapidly evolving area of web design. These solutions are going to change and more are going to be added. I will try to keep this page updated as things change, but if any of the changes are so big that it makes the most sense to just create a new page, I’ll do that instead. Either way, I’ll post a note here indicating where the latest updates are.

Font Embedding Services

These services all make use of @font-face, but make implementation easier by helping you work around the browser differences. They also all get around the legal issue of font embedding by providing you with a set of fonts that are licensed for this type of use and impossible or difficult for end users to steal.

Typekit

Status

Open to all.

Method

Subscription to a font library from multiple foundries by month or year. JavaScript used to connect your site with remote font library. You customize CSS to work with the selectors and tags you need, as well as create a font stack to be used as a fallback if @font-face is not supported, but the CSS is in the JavaScript, not your own sheet. sIFR and Cufón will also be used as fallbacks.

Pricing

Freemium. Free “Trial” account gives access to smallest number of fonts and can be used on one web site. “Personal” account for $24.99/year, “Portfolio” account for $49.99/year, and “Corporate” account for $49.99/month increase limits on fonts, bandwidth, and number of sites.

More Info

(more…)

333 free handwriting and hand-drawn symbol fonts

I’m currently designing a logo where the client wants to use a font that looks handwritten and fun, but still professional and sophisticated. I’m not a big fan of most handwriting fonts, as they are often too messy or cutesy looking to do anything practical with them. It’s been a struggle to find something I think will work.

Luckily, I ran into a large source of free handwriting fonts called Fonts for Peas, part of the kevin & amanda blog. These are fonts that are meant to be used for scrapbooking, family blogs, and the like, so most of them are pretty cutesy. But, with 333 to currently choose from, you’re bound to find a few that you could use. All of the handwriting fonts are based on actual handwriting samples that readers of the blog send in, so they’re pretty diverse. I downloaded a couple dozen myself and am excited to try them in my logo comps.

(more…)

I’m on Twitter now. Yes, finally.

I am not embarrassed or ashamed to say that I have only been on Twitter (@zomigi) for two days. That’s right: two days.

I’m not an early adopter of technology unless it is really going to make my life easier or happier. I’m also not one to give up on something old, if it’s working for me, just because there is something newer and trendier out there. And, I’m not a fan of clutter—virtual kinds as well as physical. I have ADD tendencies, so I have to be careful to not overwhelm myself with too much “stuff.”

I started hearing about Twitter in 2007. At the time, I didn’t see any need to be on there. There weren’t that many people on there that I would have wanted to keep up with. I didn’t and don’t have the time to get caught up in people’s personal, day-to-day lives—just give me my practical articles and tutorials and I’ll be on my way. Blogs could do this for me (and still can), and they kept me plenty busy/overwhelmed as it was. Also, I was working as an in-house designer, so I didn’t need to be marketing myself very heavily either. (Plus, Twitter wasn’t this totally essential marketing tool back then.)

Now, 2008 would have been a good time for me to get on Twitter and network, since I was working on Flexible Web Design and needed to get my name out there more. But, 2008 was seriously the busiest year of my life. I was working a full-time job, writing a book, renovating my kitchen, setting up a nursery, moving/re-setting up my home office, preparing to become a first-time mom, and being pregnant and tired. Twitter would not have helped me accomplish any of these important tasks I had going on last year. So I didn’t do it. It’s as simple as that.

Now that the book is done and I’m working freelance, I have more time for Twitter as well as more need to use it. I’m going to keep my tweets mainly focused on professional things, stuff related to design, as a supplement to this blog. So I hope you’ll follow me. And I hope you’ll forgive me for taking so long to jump on the bandwagon. 🙂

View more posts:

Archives by Category

  • Announcements (32)

    Learn what's happening in my career or industry, including information about my speaking engagements and books.

  • Articles (40)

    Informational or theoretical articles about a variety of web design topics, including CSS, HTML, accessibility, usability, and visual design.

  • Inspiration (8)

    Collections of images or links to others' design work that I find inspiring and think you will too.

  • Tutorials (5)

    Step-by-step articles that you can follow along with to learn a particular web design technique, including CSS layout and CSS3 effects.

Archives by Month