Custom Web Fonts: Pick Your Poison

Early in every web designer’s experience is a crushing moment of realization: the moment you discover that you can only use a small collection of fonts on the Web—and that all the good ones have already been used to death.

“Hooray!” thinks the naive Web newbie, checking out the font-family property for the first time. “I can spend the afternoon picking the font that perfectly reflects my personality for my new blog!”

And yes, sure enough, you can stick any font name you like in your CSS, and your browser will use the font on your system to display it:

.post {   font-family: Papyrus, sans-serif; }

The problem is what everyone else sees when they visit your site. If they don’t happen to have that font that is “just so you!” installed on their own system, they’ll see a generic font, most likely a downright boring one like Arial or Helvetica, instead.

Back in 1998, CSS2 proposed a solution to this in the form of the @font-face at-rule, which in theory would let you define custom fonts that would be downloaded by the browser from your web site:

@font-face {   font-family: Papyrus;   src: url(/fonts/papyrus.ttf); }

On the surface, @font-face seems like it would be a godsend to web designers. So why has no meaningful support existed for it until very recently? Read on to find out…

First on the Scene

The problem with custom fonts is that fonts are not free. They are a lot of work to design—especially the ones that contain most of the characters available for use on the Web. Consequently, the vast majority of fonts (yes, even the ones that came with your computer) are licensed under terms that describe how they can be used.

Assuming you came by them honestly, you are allowed to use all of the fonts on your computer to design things from Word documents to logos on the Web, and you can do whatever you want with those things—give them away, or sell them for money—but you can’t give away or sell the font file itself.

This presented a problem for the first browsers that added support for custom fonts. Microsoft Internet Explorer 5.5 and Netscape Navigator 4 both had to tiptoe around the legal issues by developing their own font file formats that enforced the restrictions spelled out in font licenses.

Netscape 4 eventually died off, of course, and was reborn as Firefox, which has no custom font support. Internet Explorer, however, still supports custom fonts in Embedded OpenType (EOT) format today. Nobody uses it, however, because a) it’s IE-only, and b) none of the font companies have said it’s okay to distribute fonts in EOT format, either.

Apple Leads a Renaissance

The Netscape/Microsoft stalemate left designers skeptical about custom font technologies, and they got used to working with Verdana. For a while, it seemed like text on the Web would forever look the same.

Then, late last year, Apple announced that it was adding support for @font-face to Safari, and that it would work with plain, old TrueType font files—just like the ones designers collect in the hundreds and thousands! Would other browsers quickly follow suit?

Custom Web Fonts: Pick Your Poison

In March 2008, Safari 3.1 was released with great fanfare. In its marketing for the launch, Apple boldly touted the fact that designers could “use any font they want to create stunning new websites using standards-based technology.” This announcement seemingly ignored the licensing terms of almost every font in the world—including Apple’s own fonts! Font designers were outraged.

The other browsers aren’t rushing to repeat Apple’s mistakes, but Apple has stirred up enough renewed interest in custom fonts for them to take a second look. In response, Microsoft has renewed its commitment to Embedded OpenType (EOT) format by opening it up for implementation by other browsers, and submitting it to the W3C for standardization.

One major font producer has announced its support for EOT, and has launched a site to lobby other producers to do the same.

Embedding vs. Linking

The big difference between linking to simple TrueType font files the way Safari allows and using Microsoft’s EOT format is that EOT can effectively “embed” the font in your web site. The EOT format ties the font file to your site’s domain name(s), so that it cannot simply be downloaded and re-used on another site.

This is effectively the same thing that happens when you use a custom font in a PDF file, or Flash movie. In all these formats, a motivated hacker could extract the font data and reassemble it as an unrestricted TrueType file, but the font data is distributed in a package that makes clear that such use is not allowed under the license. Font embedding is not about preventing piracy, it’s about making it clear that redistributing a commercial font is piracy.

Web designers, font producers, and browser vendors are now joining the debate over which approach to custom fonts makes the most sense for the Web. On the one hand, many designers argue that font producers should trust us to do the right thing. We don’t need a special embedding format for the images we use on our sites, so why do we need one for fonts?

On the other hand, font producers consider a font file to be a software tool for creating content, not content itself. Just as you aren’t allowed to distribute Microsoft Word to let visitors to your site view the Word documents you publish there, you can’t publish a raw font file to enable people to view content designed with that font.

Many web developers believe that embedding formats like EOT amount to Digital Rights Management (DRM), a technology that has proven disastrous to the music industry. Some have even suggested that the Web can do without commercial fonts entirely, and that we should make do with free fonts. It turns out that even popular “free” fonts like those created by Ray Larabie come with licenses that limit how they can be distributed. Larabie had this to say when discussing Safari’s font linking approach:

When it comes to my freeware fonts, I’m more reluctant to allow them to be used that way.

On his personal blog, Microsoft’s Chris Wilson has weighed in with a pragmatic analysis of the situation: Commercial font producers will never agree to allow font linking as supported by Safari, and open source fonts are unlikely to stack up in terms of quality or variety anytime soon. If we want to use commercial fonts on the Web legally, some form of embedding must be used, and EOT is the only open format for font embedding currently on the table.

What do you think? Should other browsers implement Microsoft’s EOT format, or should we push for Safari-style font linking, no matter what font producers say?


Category: javascript Time: 2008-07-30 Views: 1

Related post

  • How to view custom web fonts with "eot ttf woff " extensions? 2014-03-28

    I would like to view custom fonts that I have in the following file extensions: .eot .ttf and .woff How do I do that? --------------Solutions------------- I have used this web font generator with excelent results. You need to upload the fonts you wan

  • License needed to use a custom web font 2016-02-10

    I want to use a custom font on my website. I have found the woff file of this font on another website who was using it. I've saved it on my computer, tested it on my website (localhost only) and it works. However, after some research, I found that mu

  • custom web fonts and relative urls in spfont file 2014-08-26

    I am building custom composed look for office 365 publishing site collection. The site collection that I am going to apply this composed look is NOT root site collection, so the url of the site collection is

  • How can I reduce the aliasing that occurs around my custom icon web font when it is scaled? 2014-03-31

    I am trying to make my own icons and embed them in a custom Web font. For that, I'm using Illustrator & Icomoon. I design the icons in a 14x14px square, then I create my Web font using Icomoon and when I see the result in Chrome it looks pixel-perfec

  • How to Use Cross Browser Web Fonts, Part 2 2014-01-08

    How to Use Cross Browser Web Fonts How to Use Cross Browser Web Fonts, Part 1 How to Use Cross Browser Web Fonts, Part 2 Cross-browser Web Fonts part 3: Hyphens, Text Rendering, and Font Feature Settings Introduction In part 1 of my article (http://w

  • How to Use Web Fonts in WordPress 2015-10-22

    Recently, everybody seems to be talking about Lobster. Not the crustaceans from the ocean, but the Web Font. For those who haven't heard of it, Lobster is a good example of a popular Google Font that is embedded into web pages. Embedding fonts is not

  • Helps You Pick Your Fonts 2011-01-28

    If you're a font lover, you probably get a huge kick of looking through the vast swathes of fonts on your computer. There are so many fonts available now it's easy to download willy-nilly (official graphic design term) and fill up a drive with typefa

  • How Can I Use the SharePoint People Picker Control in my Custom Web Part? 2012-10-18

    I need to add a people picker control to my custom web part. SharePoint has an OOB people picker control (which provides suggestions while typing into the control). Is there a way to use the OOB SharePoint People Picker control in my custom web part?

  • What date picker controls are available to enter a date range inside a custom web part? 2011-12-02

    I have a custom web part that executes a SharePoint search query and displays the results. I'd like to add controls to the web part so that users can select a date range (ie. start date and end date) to filter the results by. I'd like it to be the ki

  • How to select Google Web Fonts (via @font-your-face) from drop down in SWeaver UI? 2012-03-24

    I am using the SWeaver module for "in-situ" editing of the (CSS) styles of elements on pages i.e. by "in-situ" I mean within Drupal style changes (instead of raw editing the theme files CSS via FTP). Sweaver provides the means to chang

  • SitePoint Podcast #23: Web Fonts with Jeff Veen 2009-08-15

    Episode 23 of The SitePoint Podcast is now available! This week, Kevin Yank (@sentience) has a one-on-one chat with Jeff Veen (@veen), one of the bright minds behind Typekit. Listen in your Browser Play this episode directly in your browser! Just cli

  • The Anatomy of Web Fonts Article 2005-12-09

    If one aspect of design has suffered most in its transition to the Web, it is the art of typography. For years, Web typography involved little more than choosing a typeface and font size. Unstyled Times New Roman was the norm, and the integration of

  • Web Fonts Get Real with Typekit 2009-06-01

    Web designers want access to a greater range of fonts in web design. They're about to get their wish. Recently I wrote that the problem of bringing commercial fonts to the Web could only be solved by people choosing to avoid the shouting match and in

  • set a person / user as target audience for a custom web part in sharepoint 2010 2011-02-07

    is there any way by which i can add a specific user or group as target audience of my custom web part programatically ?? i am using SPWeb web = SPContext.Current.Web; SPLimitedWebPartManager wpm= web.GetLimitedWebPartManager("SitePages/UserHomePage.a

  • Noteworthy: Web Font and Its (Possible) Alternatives 2012-01-06

    I am trying to use Noteworthy font (available on Mac OS X 10.7.2) for my web application. Unfortunately, I couldn't find it on MyFonts nor typekit; I mentioned these two sites just because so far they have a pretty good font selection and easy to int

  • How to share methods and properties between custom web controls 2012-08-20

    I'm building some custom web controls in .NET using C#. The controls inherit from the standard web controls, and add additional properties and functionality (e.g. I'm creating an 'extendedTextBox' and I'm adding a 'required' property, which if set to

  • Resources for finding good web font schemes/combinations 2013-08-28

    I have started doing some freelance website design work for small business clients, and part of my work will involve selecting fonts to use on the sites that I will be making. Given that typography is not my strongest point, I was wondering if there

  • With Salesforce Canvas, is it possible to call custom web services from the app? 2013-10-18

    I've spent some time this week playing with Canvas. I've setup an example that uses OAuth to authenticate and authorise the app; it then retrieves a record, and makes an update to the record from the app. This is done with the REST API. Initially, I

  • How to Use Cross Browser Web Fonts, Part 1 2013-12-10

    How to Use Cross Browser Web Fonts How to Use Cross Browser Web Fonts, Part 1 How to Use Cross Browser Web Fonts, Part 2 Cross-browser Web Fonts part 3: Hyphens, Text Rendering, and Font Feature Settings Greetings, readers! This week I'm exploring we

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.643 (s). 13 q(s)