The process for using TypeKit fonts in an in5 project is similar to that of using Google Fonts.


in5 supports exporting live, HTML text from Adobe InDesign. in5 can even automatically embed fonts from an InDesign document, but you need to make sure the fonts are licensed to be used on the web (or in a mobile app, if that's your end target).


TypeKit fonts are licensed to be used in web projects, so that solves the licensing challenge.


InDesign essentially hides Typekit fonts so they cannot be easily embedded automatically, but you can work with TypeKit fonts using the steps in this article.


Gathering the fonts from Typekit into a "web project"


Start by visiting the TypeKit site: https://fonts.adobe.com/typekit


Sign in using your Adobe account, if it doesn't automatically sign you in.


Typekit starting page


Search for a font, or select My Adobe Fonts.


Find your desired font in the list.



Click the code icon (</>) to add this font to a web project.



Give the project a name and select the font variants that you want to include.

project creation screen

Note that more variants means a slower download, so only include the typeface variants that you plan to use.



If you want to add additional fonts to your project, close this window and go back to your font list (or search).

second font added


Repeat the previous steps. This time, choose your saved project from the drop down.


adding to the saved project


Once you've added all of the fonts to your project, you can copy the embed code.


You only need the URL, e.g., part that starts with https:// and ends with .css.


Setting up the InDesign document with TypeKit fonts


Within the InDesign document, choose the fonts that you added to your TypeKit project and apply them to your text.


applying the heading font


applying body font


For best results, make sure these fonts are applied as part of a Paragraph or Character Style.


(Note that you can build your InDesign document with TypeKit fonts first, and then create your "web project" on the TypeKit, if you prefer).


That's all you need to do with your InDesign document. Now you can export it with in5.


Exporting with in5


With in5 installed, choose File > Export HTML5 with in5... or in5 > Export HTML5 with in5... within InDesign.

in5 export menu option


Inside the export dialog, choose HTML with Web-Safe Fallback Fonts as the Text Rendering option.

export dialog - basic section


That way in5 won't attempt to embed the fonts (you'll set it up to reach out to TypeKit in the next step).


Switch to the Resourses tab in the in5 export dialog and click the plus (+) button to add a CSS resource (this will be included with you export).

css resources


Now attach the TypeKit URL (only the URL, in5 will create the proper tag when it exports) by pasting it into the field.



Click Add to add the CSS as a resource.


css resource applied


Now click OK to export your document with in5.


Note that if you're using in5 3.3.5 or earlier, you need to follow the steps for a workaround below. 


in5 3.3.5 and earlier workaround


If you're using in5 3.3.6 or higher, in5 will automatically generate Typekit-friendly font family names.


If you're using an earlier version of in5, you'll need to use this workaround.


Testing your files to be sure your TypeKit fonts are working


It's not enough to open the files in your web browser to see the fonts...because you have the fonts installed already, so you'll see them even if the TypeKit code was broken inside the CSS.


You need to test the files on a system that doesn't have the fonts installed. You can go to another computer, or use an online testing service right from your browser.


I like Browserstack because it lets me point to a local directory on my computer to view on another system (meaning I don't have to upload the files anywhere to test them across browsers and devices).


browserstack loading screen


Here's what the file looks like when Typekit isn't working properly:

missing fonts previewed

(Note the generic sans-serif fallback font).


On the hand, here's how it looks when the TypeKit fonts are working:

working fonts

And the text is totally selectable (and easy to edit). :-)



Note that using TypeKit fonts requires an internet connection, so it may not be a good option for offline projects.