By styling our pages appropriately when the fonts are loading, we can prevent the jarring effect that FOUT can have for our user. What does this mean for us? Well, these classes can help us to prevent FOUT - the flash of unstyled text that appears as our web fonts are loading. The classes are wf-loading, wf-active, and wf-inactive. When your site requests fonts from Typekit's servers via their JavaScript code, something slightly wonderful happens - the script will add classes to the html element of your site, depending on the status of the request for fonts. However, Typekit has one significant advantage by using a script rather than plain old CSS - the wf-* classes. This is something that Fontdeck and Google don't have to suffer through.
#Add fonts to adobe xd not in typekit code#
Additionally, the script that Typekit's code generates will result in at least 2 additional http requests - one for another script, and a second for the CSS file grabbed by said script. For one thing, this method doesn't require the user to have JavaScript enabled.
Using a tag has a couple of obvious benefits. Typekit requires you to include a snippet of JavaScript in your site which grabs the necessary resources for you upon execution. Fontdeck and Google Web Fonts both allow you to use a tag to grab the fonts directly in order to use them on your site, whereas Typekit has a different approach. These services don't all use the same technique for embedding fonts. All these services host your fonts on their own servers, and manage all of the licensing nonsense that goes with them - so you can just plug and play with no worries.