Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Incorrect Documentation: JavaScript Callbacks with Adobe Fonts/Typekit

New Here ,
Jan 22, 2019 Jan 22, 2019

Copy link to clipboard

Copied

Hey Adobe, specifically the Fonts/Typekit team!

While working on a project, I realized I needed to run some JavaScript callbacks after Fonts/Typekit loaded my fonts and they became active.

The documentation links I found on your website are out of date/incorrect. Here are those links:

Typekit Help | Font events

The Typekit Blog | Font events: Using JavaScript callbacks

The way the documentation above suggests running JavaScript callbacks is as such:

<script>

  try {

    Typekit.load({

      loading: function() {

        // JavaScript to execute when fonts start loading

      },

      active: function() {

        // JavaScript to execute when fonts become active

      },

      inactive: function() {

        // JavaScript to execute when fonts become inactive

      }

    })

  } catch(e) {}

</script>

And the current way Fonts suggests initializing typefaces is with CSS, like so:

<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

However, after extensive testing on my end, the JavaScript callbacks do not work when you initialize the typefaces with CSS. You MUST initialize them with JavaScript, as suggested in previous documentation when Fonts used JS to initialize, like so:

<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>

Using JavaScript to initialize and load the typefaces will then allow the callbacks to work.

Perhaps it would be wise to update your documentation for those who want to use JS callbacks to include the requirement that you must use the JS initialization, rather than the CSS initialization. Or perhaps there is a way you can still use the CSS initialization, but allow the JS callbacks to be used.

Either way, I hope this helps others who may be experiencing similar issues when trying to use callback actions (load, active, inactive) and the suggested CSS initialization code.

Thanks!
Sean

Views

196

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jan 23, 2019 Jan 23, 2019

Copy link to clipboard

Copied

LATEST

Hi Sean,

Thanks for pointing this out. I'll share this with the team and I'm sure this post will help others running into a similar issue/question.

Cheers,

Benjamin

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines