Using “Gotham” on the Web (an unofficial document)

Recently at work, we’ve started using the font Gotham for most publications. We’re not using it on the web, though. At the moment, that’s largely because there’s a big redesign project in the works, and no one wants to make major changes until that’s finalized. In the future, we might stay away from it due to licensing restrictions and technical limitations, or even as a simple design choice.

The biggest hurdle for using Gotham on the web is that it’s not a standard installed font, and legally we can only allow it to be used in static images or with sIFR (providing we allocate licenses to the web servers that are hosting pages using the font), which effectively limits it to use in headlines, not body copy. Delivering Gotham using @font-face is expressly forbidden.

However, it is starting to be installed in many computers across campus, so I thought I could specify it as part of the font stack, and if people had Gotham installed, they would see Gotham, and if not, they’d see Arial (as suggested by the Positioning Guide).

body {
 font: Gotham, Arial, sans-serif;
}

This works in Firefox and Safari on the Mac, but not in Opera, and it doesn’t seem to work in anything on the PC. So instead, depending on the browser, you need to specify the exact font name or the exact PostScript font name. You make this work by specifying both, so that all browsers can find the font name in the format they expect.

body {
 font: 'Gotham Book', Gotham-Book, Arial, sans-serif;
}

Now all the browsers are displaying Gotham. However, Windows browsers, with the exception of Safari, seem to be synthesizing bold and italic fonts instead of using the correct font variant.

For some reason, Safari for Windows is doing terrible anti-aliasing, but it is at least getting the bold and italics right:

Opera for Mac seems to be dropping the bold:

Here’s what it should look like:

Now, I said earlier that delivery of the font using @font-face was prohibited, and that’s true…but what if I just use the “local” part of the definition to specify what “parts” of Gotham should be used when bold and italics are selected? As it turns out, that’s a bit of a pain. I won’t go into all the steps that led me to this, but here’s the final code. This represents a “best case scenario” given my users’ likely browser use, as opposed to a perfect fix:

@font-face {
 font-family: 'Gothamy';
 src: local('Gotham Book'), local('Gotham-Book');
 font-weight: normal;
 font-style: normal;
 font-variant: normal;
}
@font-face {
 font-family: 'Gothamy';
 src: local('Gotham Bold'), local('Gotham-Bold');
 font-weight: bold;
 font-style: normal;
 font-variant: normal;
}
@font-face {
 font-family: 'Gothamy';
 src: local('Gotham Book Italic'), local('Gotham-BookItalic');
 font-weight: normal;
 font-style: italic;
 font-variant: normal;
}
@font-face {
 font-family: 'Gothamy';
 src: local('Gotham Bold Italic'), local('Gotham-BoldItalic');
 font-weight: bold;
 font-style: italic;
 font-variant: normal;
}
body {
 font-family: Gothamy, Gotham-Book, Arial, sans-serif;
}

Opera for Mac is now fine, but Opera for Windows now seems to be unable to produce italics:

Safari for Windows is now doing an even crappier job of anti-aliasing with ClearType on (what’s particularly odd is, with ClearType off, it’s actually perfect, and it has no problems if you tell it to use its own font smoothing methods):

Internet Explorer is still making up its own bold and italics, but at least now if I felt strongly about this I could remove Gotham-Book from the font stack and it would revert back to Arial, without affecting the appearance in any other browser. I’m kind of surprised that this behaviour persists in the Platform Preview of Internet Explorer 9, but at least that’s still a work in progress and there’s a chance that Microsoft will fix this before the final build is shipped.

By the way, Chrome for Windows is fine, but Chrome for Mac absolutely hates @font-face with the “local” definition. Apparently, this is a known issue:

This actually persisted when I removed all the @font-face definitions and just had Gotham in the font stack, but I think that might just be some aggressive caching.

So, should you use Gotham this way on your own websites? I’d certainly say no, unless you’re working in a tightly controlled environment where you know no one’s using a browser that doesn’t render the way you’d like. Even if future releases display this in a more consistent manner, it could be years before their use is widespread.