adding Adobe Typekit to The Turning Gate


When I announced website update v4.0, one of the components I mentioned was Adobe's Typekit. This rich, professionally designed font catalogue brings tremendous value add to Adobe's Creative Cloud service. Here's how to add it to The Turning Gate's suite of web galleries…

Web fonts

With the final advent of the HTML5 W3C standard, available to varying degrees since 2008, there has been a significant shift towards making the web a friendlier, more interactive place. The CSS3 @font-face rule (part of HTML5) and web based fonts opened up a whole new and rich set of branding assets and identity options. In the past few years, and part of that movement, is the recent broad availability of web fonts, notably by Google and Adobe Typekit (although there any many comparable alternatives out there).

johnbishopimages.com v3.0 used a Century Gothic, Avant Garde font stack. I like sans-serif, geometric fonts that feel crisp, open, and rounded. Century Gothic is a digital typeface that has never been made into actual foundry type but is found on Windows (85%) and MACs (42% ).

As I started to think about v4.0 last fall, I wanted to refresh the font I was using. I had been a Creative Cloud subscriber for a few months and was beginning to explore the depth and breadth of CC offerings and services when I found Typekit!

I immediately fell in love with Proxima Nova, Mostra Nuova, Museo Sans but most notably Futura PT … have a look at this colophon. What I find fascinating is that Futura, based on geometric shapes that are representative of visual elements of the Bauhaus design style of 1919–33, was the basis for Century Gothic! Who'd a thought!

The beauty about Typekit? The fonts are served from the cloud via a content delivery network and not from your server – it's fast. And they don't need to live on your end users computer or mobile devices! At last – typography becomes a corner stone of a consistent user experience (UX) across all platforms including Windows, MAC, Android, iOS, ….

Typekit

Either sign on to Typekit with your Adobe Creative Cloud account or create an account.

Once you've got access to Typekit's catalog, set up a new kit, add the fonts you want and publish the kit. You can always go back and make changes to the kit at any time. Just make sure to re-publish it after making your changes.

When you add a font, click on Using fonts in CSS and make note of the font family value shown (in my case 'futura-pt'). You'll need to enter this in all the Turning Gate web galleries where you want to use this font (i.e. Stage, Gallery, Pages, …).

Also make a note of the Kit Size shown (302K here). I would suggest using two fonts, four styles per font at a maximum. While Typekit is cloud based, a larger kit size will take longer to load. Note that using more than one font means you will have to add it to a separate font section (i.e. Blockquote or Code) in the Lightroom web module or add special CSS selectors (i.e. h1, h2, h3, …) to custom.css. Otherwise it will never get selected!

To get the javascript you'll need later on, click Embed Code in the top right corner of the kit popup window.

Select and copy the code shown to the clipboard and paste it into your favourite text editor for now. We'll come back to this shortly.

The Turning Gate

Now we move to Lightroom where we …

  1. add the font family name to all the TTG web galleries desired, and
  2. insert the javascript code set aside above into phplugins.php, and
  3. add a custom.css style to prevent FOUT, aka Flash Of Unstyled Text.

Web Galleries

Bring up your TTG web gallery inside Lightroom, select the Site Info pane and scroll down until the Typography section appears. Insert your font family name ahead of all the other fonts in the provided stack. In my case I added my new font 'futura-pt' to be the default font for all main typography (and for all other instances of Font-family). You may also want to add it to your Identity and Navigation Items page elements. Be sure you update all the Font-family page elements desired.

If you added a second font to your kit, add it to either the Blockquote and Code Font-family page elements.

I find it extremely helpful to update my web gallery template preset with each change or so. The chance of something being inadvertently dropped is too high and after a whole series of changes, losing one or two in the middle of the series can be difficult to locate and remedy – experience talking here! 😉

Now export the web gallery and upload it to your server. For now, until we update PHPlugings and add custom.css, you won't see any change … the font isn't being loaded yet!

Make sure you update all the TTG web galleries you use. Each one must be updated to include your new font family name in the various page elements.

PHPlugins

Support for including your own code at strategic places in the pages dynamically generated by the TTG plugins via PHPlugin hooks was delivered starting with the first release of the Core Elements versions of Matthew's plugins. The CE4 documentation website has all you need to know about enabling and using the PHPlugins feature as well as a very much appreciated nod to yours truly.

Follow the examples shown and verify that your PHPlugin hooks are being activated and called correctly. I would strongly suggest you also enable Shared Resources. This one simple, rather plain option is what Core Elements (CE, version 4 or CE4) is all about. Beyond enabling better server performance, it makes maintenance of shared features, most notably PHPlugins and custom.css a breeze. Once you're sure everything is working correctly, press on …

We will want to add two components to our "/phplugins/" folder;

  1. the javascript we saved from above, and
  2. load a custom CSS style sheet to prevent FOUT (Flash Of Unstyled Text).

We will make use of the ttg_head_end hook.

Open the "/phplugins/phplugins.php" file in your favorite text editor and look for the following block of code (found on line 130 in my case; yours may be different) …

  1. /* DELETE THIS LINE
  2. // CUSTOM STYLESHEET
  3. // This function implements a custom stylesheet from which users may provide additional page styling or override existing styling set by the plugin
  4. // Edit the custom.css file in /phplugins/css/ to define styles
  5. // Serves as an example of a function being applied globally
  6. function ttg_head_end( $style, $path ) { 
  7. 	echo '
  8. 	<link rel="stylesheet" href="/phplugins/css/custom.css" />	
  9. 	';
  10. } // END
  11. DELETE THIS LINE */

Delete the lines with the text DELETE THIS LINE. Then insert the javascript code copied from the Typekit popup window in between lines shown above as 137 and 138 (yours will now have shifted up one). We should now see this …

  1. // CUSTOM STYLESHEET
  2. // This function implements a custom stylesheet from which users may provide additional page styling or override existing styling set by the plugin
  3. // Edit the custom.css file in /phplugins/css/ to define styles
  4. // Serves as an example of a function being applied globally
  5. function ttg_head_end( $style, $path ) { 
  6. 	echo '
  7. 	<link rel="stylesheet" href="/phplugins/css/custom.css" />
  8. 	<script src="//use.typekit.net/edm4evp.js"></script>
  9. 	<script>try{Typekit.load();}catch(e){}</script>
  10. 	';
  11. } // END

Save the file and upload it to your server. That's it for the javascript.

custom.css

Inside the same folder "/phplugins/" we find another folder with single file inside, "/css/custom.css". Open this file in your text editor and insert the following lines …

/* Hide text until Typekit fonts load */
.wf-loading body, .wf-loading #nav a, .wf-loading #nav li a, .wf-loading #nav li span  {
	visibility: hidden;
}

Save the file and upload it.

When Typekit starts running in the browser, it sets the wf-loading state active. Once the required kit is loaded, it turns off the loading state and activates the wf-active state. If the kit does not load or the load times out, Typekit will clear the loading state and activate a wf-inactive state.

The CSS statement inserted above prevents the typography from being realized to the browser window until the Typekit font has been loaded. This eliminates the "font flashing" often associated with loading webfonts. I found that I had to add this selector to the other four selectors shown body, #nav a, #nav li a, & #nav li span.

And that is it!

I find the end result smooth and professional looking. And I really love the way my website looks the same on all sorts of devices, one of the core objectives for v4.0!


Leave a Comment

Your email address will not be published. Required fields are marked *


Get Email Updates

Support

It takes money to run a website. If we have been of assistance to you, if you have found useful information on our website, or if you have enjoyed using the free Photoshop Creative Commons plugin, please consider helping to defray our costs by making a secure PayPal donation. We do not receive any of your personal information or financial data.

Disclosure

john bishop images receives a small portion of affiliate sales. This costs you nothing extra, but helps to support our work. Though compensated by affiliate relationships, john bishop images carefully chooses affiliates based upon the quality of services and products these entities provide to our users. They must provide significant value-add. john bishop images is independently owned and the opinions expressed here are our own.