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
1
Reply
AdChoices