How can use Typekit fonts?

Question

I do not know how to use Typekit fonts there is only tutorial for Google fonts

Answer 1

Typekit now supports CSS embed codes (way easier than the JavaScript solutions):
https://helpx.adobe.com/fonts/using/embed-codes.html

You can now simply attach the CSS hyperlink as a Resource, as you can with Google Fonts:
https://ajarproductions.com/pages/products/in5/demos.php#using-google-fonts-with-in5

---

Full Typekit walkthrough:
https://ajar.freshdesk.com/support/solutions/articles/26000034920-using-typekit-fonts-with-indesign-in5-web-projects

Answer 2

The process would be similar, except that you would use a Typekit URL (which I believe is only available as a JavaScript link): http://help.typekit.com/customer/portal/articles/6780-adding-fonts-to-your-site

The second line listed in the link above would need to be pasted into a .js file and attached as a local JavaScript file in the Resources section of the in5 dialog:

try{Typekit.load();}catch(e){}

in5 will then wrap this code in a script tag. Make sure this Resource item is below the first one in the list. The Typekit JavaScript file must be present before this line of code is called.

Comments

You have to do a few things:

- Typekit: //use.typekit.net/lfx4lkr.js
- Change for: http://use.typekit.net/lfx4lkr.js

The names of the typefaces change in web or  desktop. There is change in the css.

Example typography desktop: Grafolita Script

Typekit Name: grafolita-script

Why not implement Typekit Kit ID?

"If you're using a plugin or service that asks for a Typekit Kit ID, use this:xxxxx"

---

Good to know, pardog.

I would love to implement Typekit through ID and make this seamless. Unfortunately, Adobe doesn't offer any hooks to access this info as an extension.

---

I hope you get it

---

Hi There!

I am trying to use typekit fonts within my in5 export, but cant seem to get it to work.

I have added the line http://use.typekit.net/zgk5rbc.js (from my typekit) to the JavaScript section in Resources and have also added a JS local file containing try{Typekit.load();}catch(e){}. However when exported it does not work and defaults back to a generic web font.

Could you please assist me with this? Not sure what I'm doing wrong...

Answer 3

Typekit is a bit tricky. Here's a better answer than my previous one...

You can attach the following as a .js file in the Resources section of the in5 dialog:

var typekitURL = "//use.typekit.net/REPLACE_WITH_YOUR_FILENAME.js";
var tkscript = document.createElement('script');
tkscript.type = 'text/javascript';
tkscript.src = typekitURL;
document.getElementsByTagName('head')[0].appendChild(tkscript);
loadTypekit();
function loadTypekit(){
    if(!this.Typekit) {
        setTimeout(function(){loadTypekit();},50);
        return;
    }
    try{Typekit.load();}catch(e){console.log(e);}
}

VERY IMPORTANT: The above code should get Typekit loaded, but you must also add the domains you're using to host your content to your kit on the Typekit website:
*.MY_SERVER_NAME.com, localhost

Note: Typekit will not work on your local machine (without a server), you must post your files to a server.

Also, you'll want to make sure the full font name (e.g. "Calluna Sans" rather than "calluna-sans") has been added to your kit, since that's how in5 will output it.

Here's a link with some other troubleshooting ideas.

Comments

I want to use Coporate A in InDesign and match it to a typekit font. But the Problem is: The font-family in5 outputs is called "Corporate A Pro" and the CSS-class Typekit demans is called corporate-a

How can I match them?

---

Hmm...that's tough one.

You could try attaching something like the following as a .js file in the Resources section of the in5 dialog:

$(function(){
   $('p').each(function(){
      var p = $(this);
      var ff = p.css('font-family');
      if(ff.indexOf("Corporate A Pro")>-1) p.css('font-family','corporate-a, '+ff);
   });
});

//---
That should save you from having to do a find and replace after each export.

---

Hey! thanks for sharing a code I successfully add into my coding section It's working. Before reading this post I try on the [URL removed] for help purpose. But not getting any response.

---

Hi Bellclaire,
The URL that you listed is not an official Adobe site. All Adobe support goes through the adobe.com domain.