User Tools

Site Tools


phplugins_adobe_typekit

Adobe Typekit

Built around web standards, Adobe Typekit gives designers and developers a subscription-based library of hosted, high-quality fonts to use on their websites. If you're a Creative Cloud subscriber, then you have access to Typekit as a part of your subscription.

Using Typekit fonts in CE3 websites is fairly simple, and very similar in implementation to using Google Web Fonts. This tutorial will walk you through the necessary steps.

Setup PHPlugins

We're going to implement Typekit via PHPlugins, so be sure to enable PHPlugins for your site during the creation process in Lightroom.

After exporting and loading your site and/or galleries onto the server, open the phplugins/phplugins.php file and enable the provided function for custom CSS:

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

After working our way through the Typekit website, we'll be piggybacking on this function to add our Typekit code.

Get Fonts

Browse and select fonts at the Adobe Typekit website.

Create a kit, or add fonts to an existing kit. Setup that kit for use on your domain:

Get Embed Code

Copy the provided embed code. If you need to find the embed code, click the green “Launch Kit Editor” button in the top-right corner of the Typekit website, then “Embed Code” link in the top-right corner of the typekitEditor window. You should get something that looks like this:

Copy the code and paste it into your PHPlugins function.

// CUSTOM STYLESHEET
// This function implements a custom stylesheet from which users may provide additional page styling or override existing styling set by the plugin
// Edit the custom.css file in /phplugins/css/ to define styles
// Serves as an example of a function being applied globally
function ttg_head_end( $style, $path ) { 
	echo '
	<link rel="stylesheet" href="/phplugins/css/custom.css" />

	<script type="text/javascript" src="//use.typekit.net/fkb5idy.js"></script>
	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

	';
} // END

Here you can see I've added the two lines provided by Typekit, beginning ”<script type …”. Follow suit, adding your own embed code in the same place that I have.

Apply Font-families to your page(s)

From here, you have a choice how to proceed:

  • You may add the Typekit fonts via a custom stylesheet.
  • You may add the Typekit fonts via the Typekit Editor.

Either way, you can use the following CSS as a reference for setting fonts in CE3.

/* paragraphs, lists, etc. */
p, ol, ul, dl, address, ins, mark  
{ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }

/* headings */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 
{ font-family: Futura, "Century Gothic", AppleGothic, sans-serif; }

/* blockquotes */
blockquote 
{ font-family: "Droid Serif", Georgia, Times, "Times New Roman", serif; }

/* code, monospace */
pre, code, kbd, samp 
{ font-family: Consolas, "Lucida Console", Monaco, monospace; }

You can copy and paste selectors or groups of selectors from above into the Typekit Editor:

Press the “Publish” button in the Typekit Editor and your site should shortly be updated with your chosen fonts.

If you'd rather work via custom stylesheet, you can copy and paste the above CSS into your custom.css file, then edit the font-families to include your new fonts.

phplugins_adobe_typekit.txt · Last modified: 2013/05/10 05:39 by admin