Host Typekit JS Locally

Question

Typekit requires us to include their JS file to render the fonts, e.g.:

<script type="text/javascript" src="https://use.typekit.com/random-name.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

I have noticed there has been a few instances where their server is slow to response, which caused the page to halt. Unfortunately, some people have had similar experience.

I tried to host the JS file locally and it seemed to work.

<script type="text/javascript" src="http://use.typekit.com/random-name.js"></script>
<script type="text/javascript">window.Typekit || document.write('<script type="text/javascript" src="/scripts/js/ext/random-name.js">\x3C/script>')</script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

My questions:

1. Any differences when rendering the fonts from a local JS?
2. Will the HTTP referrer be the same between using a remote JS and a local one?

Thank you.

Related:

• Loading script asynchronously
• Stop Typekit Fonts From Slowing Down Your Site

Stacy

Answer 1

This is Ben from Typekit Support.

We can't guarantee that fonts will continue to work as expected if the files are hosted locally and for this reason, we don't recommend hosting the JavaScript file yourself.

To solve any slow response time issues, we recommend loading Typekit asynchronously. You can learn more about this here: http://help.typekit.com/customer/portal/articles/649336-embed-code

This code won't block rendering while the Typekit JS is loading, allowing the rest of the page to render immediately.

Constantino

I would like to know if the Typekit.load loading, active and inactive events are still available if asynchronous loading is applied? – Truth

The problem with the Typekit Async script solution is that the font is loaded each time and the cache doesn't work... I went with the typekit-cache solution below. – Operant

However asynchronously loading means the site will be displayed with a different font and when typekit does load the typekit font will replace the exisiting one. This will make the website 'flicker' and creates a very bad user experience. github.com/morris/typekit-cache is the only good option here but can you confirm this is against the Terms of use? @Benjamin Welch – Hedgehog

Answer 2

For this, and to eliminate flashes of unstyled text, I implemented a simple script that caches Typekits in localStorage: https://github.com/morris/typekit-cache - maybe this helps future typekit users running into the same problems.

Hanker

Answer 3

1. No. Just try to keep JS file up to date
2. Yes. Request is still made by user browser from your domain name.

Hideous