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.

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

  1. Kevin, very interesting article. I note the Royal Opera House (UK) is using Gotham beautifully but using verdana on its website.
    I am implementing Gotham for a client and exploring use of a substitute online via @font-face by finding such at http://www.fontsquirrel.com.
    Not found the font yet but their font-face resources are excellent and free. Thanks

  2. Leannekera says:

    Many thanks for this Kevin, had an issue today with font squirrel not accepting this for @font-face.

    I know its not ideal but this article solved the issue for my client so I owe you one :)

  3. Martin says:

    I just had a similar challenge with a client and finally choose ‘Proxima Nova’ as web font which comes very close to ‘Gotham’ or ‘Gotham Narrow’. The family is delivered with and included in the regular Typekit package: http://typekit.com/fonts/proxima-nova

  4. Bruno De Bondt says:

    I ran into this problem today, and e-mailed H&FJ about it. They replied and said they’re planning to roll out their own webfont service later this year.

  5. Jeeyoon says:

    Thank you! This explains my problem so clearly and beyond!
    I owe you big one too!

  6. Thank you. Very informative post. I was wondering why my Gotham fonts weren’t working right.

  7. Christine says:

    For anyone who came across this post looking for a webfont alternative to Gotham, I found that Google’s “Montserrat” is very similar. There are a few letters that are kind of funky (especially G, J and Q), but it does the trick.

    http://www.google.com/webfonts/specimen/Montserrat

  8. kimball says:

    Awesome write up bruh!

Leave a Reply