Follow us

Using Typekit Fonts with Reflow

By sewalker on January 31, 2014 in Tips and Tricks
1

Using Typekit in your Reflow designs is pretty easy, but you need to follow a couple steps.

Take a quick look at the video and you’ll notice there are only a couple steps you need to take to bring Typekit fonts into your Reflow project.

Step by Step


The Typekit Menu

Find the Typekit menu under the Typography section in your Reflow  project.
Typekit menu

You can get instructions by rolling over the “?” in the menu. But we’ll go over it all here.

Typekit instructions


Typekit website

You’ll now need to go to the Typekit website to create a kit, or find one you’ve already created. Access the site by using your Creative Cloud app and going to the fonts section, or just in your browser. For more information on using Typekit, check out this tutorial that has more topics included.

Typekit website

When adding fonts to your kit, be sure to check for fonts that allow “Web Use”. Then add them to a kit.

Typekit - kit

Once you add the font to a kit, you’ll get the Adobe Typekit Editor where you’ll get the info you need for Reflow.

Typekit Kit Editor

The next two steps are the important parts:


Adding localhost

First we’ll add “localhost” to the Domains allowed by the kit. You can find this under “Kit Settings” in the Editor.

Typekit - Kit Settings

Grab the Kit ID

The Kit ID is what you’ll need to paste back into Reflow to use the fonts you’ve put in your Typekit kit. In the Typekit Editor click the “Embed Code” link and copy the six character ID:

Typekit - Embed Code

Now make sure to publish your kit!


Back to Reflow…

Switching back to Reflow, now add the Typekit ID into the field for Custom fonts and hit return. Once successful, the field will turn green, and you’ll now have these fonts available in your typeface drop down.

Reflow - added Typekit ID

 

That’s it! Again, the main  things to remember when using Typekit fonts:

  • • Be sure to add “localhost” to your domains
  • • Remember to publish your kit when you make changes
  • • Find the Kit ID in the Embed Code and paste it into Reflow

 

About the Author

sewalkerView all posts by sewalker >