How can I integrate Adobe Typekit fonts?« Back to Questions List

I still have to reboot illustrator every other time I use Export Kit. I also fixed the missing images issue I was having. In regards to the fonts I figured out how to use the Adobe TypeKit scripts to incorporate Myriad Pro Condensed, Myriad Pro Light and Myriad Pro Light Italic into my design. I embedded the script into the header of the Export Kit output along with the google font embed code. But I then have to manually change the font families in the CSS output.

I've gone through and done that, but now if I make any changes, I'm also going to have to make changes to those fonts again everytime I export the file. Any ideas how to integrate the Adobe TypeKit into my project and have it work with your software so it outputs the CSS correctly? Here is the embed code:

<script srsec="https://use.typekit.net/{hash}.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

Any ideas?

Added January 25, 2017 2:49 pm

This question has been resolved, view the correct answer now!

Correct Answer

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

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

Custom HTML HEAD

http://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!

Answer by admin ★★★
Answered On January 26, 2017 3:49 am #
Looking for another answer? View other questions in CSS Illustrator Output Image or get premium support for guaranteed results.
Asked by coachtim23★★★
384 views
1 answer
Last Answered 3 months ago by admin

Recent Answers


Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.