Hi,

This is very easy to do but will require a few steps and basic knowledge of our CSS Styles. Before you do this we recommend you read more about creating custom CSS Styles inside your creative and adding custom content to your custom HTML head.

Custom CSS Styles

//exportkit.com/plugin/environments/css/create-custom-css-class-styles-for-html5

Custom HTML HEAD

//exportkit.com/learn/how-to/using-the-suite/using-export-kit-pro

SYNC YOUR TYPEKIT FONTS

Ensure you sync your Adobe fonts and generate your web script and add this to your Custom HEAD: https://helpx.adobe.com/typekit/using/add-fonts-website.html.

STEP 1

Create a custom CSS Style for each font you plan to use with your design. You can use any name for your CSS class but your name should be unique.

STEP 2

Add the custom CSS style to each element you want to render the Adobe Typekit font.

${css|style:package_header} knotts header

STEP 3

This step has 2 options depending on your design style. Each Adobe Typekit font will generate its own class for rendering the font-family in the CSS.

.tk-myriad-pro-condensed{font-family:"myriad-pro-condensed",sans-serif;}
.tk-myriad-pro{font-family:"myriad-pro",sans-serif;}

This allows you to do one of the following:

OPTION 1: Use The Typekit CSS Class

When adding the CSS Style to your element, you can also add the additional Typekit class for the font name.

${css|style:package_header tk-myriad-pro-condensed} knotts header

OPTION 2: Add The Font-family via ${code}

You can also manually add the font-family to your project using ${code} tag with your existing custom CSS Style.

<style>
.package_header{ font-family:myriad-pro-condensed, sans-serif!important; }
.package_body{ font-family:myriad-pro, sans-serif!important; }
.italic{ font-style:italic; }
</style>

STEP 4

Thats it!