Using Typekit Fonts with Photoshelter

Photoshelter is primarily for displaying photos. But that doesn't mean you can't spruce up its fonts.

typekit-panel

Photoshelter now offers two options for its sites: Beam and Classic. For now, you can only customize the fonts in Classic templates.

Since the earliest days of Netscape Navigator, when the world wide web made the leap from entirely text-based medium to a graphical interface with graphics and photos and endless other bells and whistles, fonts for online text have been rendered on the viewer’s computer. And the viewer’s computer can only render fonts that are installed on that system. Different operating systems come with different standard fonts installed, and even sometimes different versions of the same operating system aren’t consistent. Basically, there’s no single font that is installed on 100 percent of systems across all operating systems.

So if you wanted to present your visitors to your website with a consistent look you’d have to play the odds and settle for something common like Arial/Helvetica or Georgia/Times. That’s not necessarily a bad thing. Some beautiful sites can made with standard web-safe fonts, like this one, this one or this one. But sometimes it’s nice to mix it up a little.

Web Fonts

In the last couple of years, a great new option has emerged that vastly increases the possibility to control the look of the text on your site: web fonts. Instead of relying on the fonts on the user’s computer, these grab the fonts from a web server in real-time, taking variations in individual operating systems and computers out of the equation. That opens up thousands of possible fonts to be displayed consistently regardless of whether it’s a Mac or Windows or Linux machine, a shiny new iPad or a dusty old Dell 486.

Two of the biggest players in the field of web fonts are Google Fonts and Typekit. Either is a good option. I’ve chosen to work with Typekit because they have the fonts I want to use. It’s a subscription-based service with some really beautiful fonts licensed from some of the world’s best font foundries. At the time of writing, they have 529 fonts available and they’re adding more all the time. Importantly, they’ve put an emphasis on quality over novelty.

Using WordPress? Check out my Web Fonts for WordPress post.

Photoshelter & Typekit

I’ve been using Adobe Typekit fonts for a while now on my main sites and when I recently wanted to customize my Photoshelter site to match the look and feel of my main sites, making the fonts consistent was something that helped a lot. And, as it happens, it was pretty easy to set up.

In its October 2010 update, Photoshelter added some support for Typekit. It’s a good first step, but at least in this initial roll-out the selection of fonts available is pretty limited. That’s understandable–many fonts require license fees to distribute, and it’s not reasonable to expect Photoshelter to get a blanket redistribution enterprise license for every font on Typekit and make them available to all their users. It’d be like Photoshelter licensing several hundred of your rights managed images and then making them available for any Photoshelter user to use on their website–perhaps possible, but definitely expensive. Maybe they’ll negotiate a special deal one day, but for the moment the way to get maximum flexibility and a very large selection of professional fonts is to sign up for your own Typekit account.

What You’ll Need

  • A Photoshelter account. But I’m assuming that if you’re reading this you already have one of those. If not, you can sign up for a trial here.Using Typekit Fonts with Photoshelter
  • A Typekit account. Prices range from free for a single low traffic site, limited font selection, and necessary Typekit badge to $99.99 per year for the works. Either the $24.99 Personal or $49.99/year Portfolio accounts are, I think, quite reasonable. (And there are always Google Fonts if Typekit’s prices are too steep for you.)
  • A basic working knowledge of CSS, at least enough to specify fonts.

Adding the Code

Photoshelter has a shortcode for customized sites, but that’s not going to give you access to your own account fonts. You’ll need to insert some customized javascript that links to your Typekit Kit ID. To get that:

  1. Sign in to Typekit.
  2. Create a Kit for your Photoshelter domain. In my case, that’s http://davidcolemanphoto.photoshelter.com. If you’re using a custom CName in Photoshelter, use that.
  3. Launch the Kit Editor and choose the fonts you want to use on your Photoshelter site.
  4. If you’re not using a custom CName on Photoshelter, skip to Step 5. If you are using a custom CName, there’s an extra step you have to do to make sure that the fonts will display on your non-homepage pages: you need to add photoshelter.com to the kit’s list of authorized domains. In the Kit Editor, open the Kit Settings window via the “Kit Settings” link in the upper right-hand corner of the Kit Editor and add “*.photoshelter.com” (note the asterisk; don’t include the quotation marks) to the comma separated list of domains, and then save the settings. (Thanks to Peter and Andrew at Photoshelter for pointing out the need for this step.)
  5. Publish the Kit (button bottom right).
  6. Click on “Embed Code” at top right. Copy the entire section of javascript code from the popup.
  7. Log into the My Website section of Photoshelter (I’m assuming here that you’ve already set up a customized site). From the Master Templates box at top right, click on the Edit next to Public Page Master Template.
  8. In the Footer HTML box, paste the javascript code from Typekit and save the template.
  9. Thus far you’ve enabled the use of Typekit fonts, but to use them you need to specify the fonts in your CSS. Using CSS is beyond the scope of this post, but you can get the necessary font selectors from your Typekit Kit Editor. Add those to your CSS and you should be good to go.

Slaying the Dreaded FOUT

One issue I’ve found with using Typekit with Photoshelter is what’s known rather inelegantly as “Flash of Unstyled Text.” It’s that lag that sometimes happens when the standard web-safe fonts load first and then noticeably shift to the Typekit fonts, something that’s most noticeable on slower servers or data-intensive pages. This isn’t something specific to Photoshelter–it’s a symptom of using remotely fetched web fonts rather than using local ones already on the user’s machine. And while it doesn’t make any functional difference, it can be a matter of preference to remove them.

It’s easy enough to do thanks to some helpful features created by the Typekit team. Basically, what you do is hide the text until it can load with the Typekit fonts. So instead of a flash of web-safe font being replaced by the Typekit font, you get a brief moment of no text but when it is added it’s in the Typekit font.

Typekit has come up with a nifty way of doing this that doesn’t require any fancy javascript on our end. They’ve set up their service to split the CSS into two classes, one for the loading font and one for the loaded font. So all you do is hide it while it’s loading and only display when it’s loaded.

The example Typekit provides is:

.wf-loading h1 { /* styles to use before Typekit is loaded */ }

.wf-active h1 { /* styles to use after Typekit is loaded */ }

As a practical example, this is the code I’ve got in my base.css file to control the display of the top level headings (h1) text:

.wf-loading h1 { font: 36px/1em "ff-enzo-web-1","ff-enzo-web-2",Arial,sans-serif; padding-top:20px; text-transform: uppercase; visibility: hidden;}

.wf-active h1 {visibility: visible; }

You can see the effect when you load one of my pages with text on it (for example, this one of the US Capitol Building). You might get a slight lag before the title heading and my contact info at top right loads, but you’ll get those only when they the Typekit font is ready.

You can apply it to whatever styles (H2, p, etc) you’re applying Typekit fonts to. I decided only to do it for text at the very top of the page that’s likely to be visible as the page is loading, but you can apply it to all Typekit text on the page if you like.

Comments

Trackbacks

Comment