Adobe's Typekit "is a subscription font service that brings thousands of fonts from foundry partners into one library for quick browsing, easy use on the web or in applications, and endless typographic inspiration."
Because the fonts are added to websites via Typekit's JavaScript rather than CSS, the service is not compatible with AMP.
ithinkihaveacat
All 22 comments
Experimental <amp-typekit> extension: https://github.com/ithinkihaveacat/amphtml/pull/1. The implementation mostly follows AMP's performance optimization rules, but it produces invalid/insecure AMP pages that can't be cached on the CDN.
ithinkihaveacat
on 5 Apr 2016
@rudygalfi @jmadler Did we have any conversations with TypeKit?
We'd love to support them through the same mechanism we use for fonts.com and Google Fonts.
cramforce
on 5 Apr 2016
/cc @bramstein
ithinkihaveacat
on 5 Apr 2016
@cramforce Will see if I can get someone from the Typekit team looped into this issue.
rudygalfi
on 5 Apr 2016
Typekit engineer here. I'm not that familiar with AMP's technical requirements, but I'm more than happy to have a discussion about how we could accomplish this.
bramstein
on 5 Apr 2016
@bramstein The problem is that AMP allows "third-party JavaScript but only in sandboxed iframes", which is incompatible with Typekit's approach of bootstrapping the font loading via JS.
It might be possible to add an "iframe mode" to the Typekit JS in which it reports the stylesheets to load back to the parent via postMessage() but that seems fragile, complicated and probably not performant enough.
So, my feeling is it's not possible for AMP to support Typekit fonts without large changes to the Typekit loader and/or AMP, though I'd love to be wrong.
(BTW I'm flagged here as an AMP Project member but I think that's because I work at Google; I don't work on AMP myself and certainly don't speak for the AMP Project!)
ithinkihaveacat
on 5 Apr 2016
The method for including custom fonts in AMP is outlined here: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#custom-fonts
We have a special exception that allows font providers to whitelist a URL pattern for style sheet link tags for font inclusion. This was currently done for fonts.com and Google Fonts. We also allow usage of @font-face in the inline CSS.
Loading fonts definitely cannot include loading an iframe. AMP is carefully designed to make font loading as efficient as possible (primarily by driving the HTTP requests blocking font loading to either 0 or 1) and we have found early on that performance cannot be maintained without that.
The amp-font element provides for fine grained control over font loading (timeouts, FOIT, etc), so most things that one might want to do with JS and fonts should be covered. If anything is missing it might be possible to add it to amp-font. The only thing that cannot be added is that amp-font load the font itself. That must be triggered based on CSS only.
cramforce
on 6 Apr 2016
@bramstein great to have you hear. Let me know if you have any more questions! Also happy to hop onto Slack or Hangouts!
cramforce
on 6 Apr 2016
@cramforce Interesting. The way AMP loads web fonts is very similar to Typekit. We also use JS to provide better control over timeout and font loading behaviour (through the Web Font Loader and Font Face Observer). Another reason we use JS is to keep track of font usage through a beacon. We use this data to pay the foundries that put their fonts on Typekit.
If amp-font-element provides font events and loading behaviour we're not necessarily tied to the Typekit JS provided we can find a way to still collect usage information. I'm happy to chat on a hangout or a Slack channel.
bramstein
on 6 Apr 2016
@bramstein Could you sign up for our Slack here: https://docs.google.com/forms/d/1wAE8w3K5preZnBkRk-MD1QkX8FmlRDxd_vs4bFSeJlQ/viewform?fbzx=4406980310789882877
Thanks!
cramforce
on 6 Apr 2016
Another vote for support for Typekit fonts, from WIRED.
kvignos
on 4 May 2016
The other issue you'll need to resolve is domain licensing. AMP pages and (and do) run on multiple CDN's so the domain loading the font will often not be that of the site that licensed it. If Typekit validates the domain of the page you're going to run into problems there.
jpettitt
on 8 May 2016
So it there currently no way to use typekit as a font provider with AMP?
doodirock
on 28 Sep 2016
@doodirock Not currently.
@bramstein Any updates on Typekit support that you could share?
rudygalfi
on 28 Sep 2016
Do we foresee this moving forward at any point? Thanks.
bcampeau
on 28 Nov 2016
It'd be great to get this implemented as a feature!
thomaslove
on 21 Dec 2016
I believe this was closed by #10876.
jridgewell
on 24 Aug 2017
Via #10876, it looks like the way to use Typekit fonts is via stylesheet URLs of the form https://use.typekit.net/oeg4hgb.css. (This approach is not yet documented.)
ithinkihaveacat
on 24 Aug 2017
This is in the works. Lets wait for @bramstein to comment when he considers this done.
cramforce
on 24 Aug 2017
Now announced (in "early access") by Typekit: Serve web fonts without JavaScript.
ithinkihaveacat
on 30 Aug 2017
Yes, this is supported now. Thanks for your patience!
I'll open a pull request with the documentation changes in the next couple days. Thanks to @cramforce and the rest of the team for their help.
bramstein
on 30 Aug 2017
This issue hasn't been updated in awhile. @rudygalfi Do you have any updates?
ampprojectbot
on 25 Dec 2017
Related issues
cvializ
路
3Comments
radiovisual
路
3Comments
westonruter
路
3Comments
choumx
路
3Comments
choumx
路
3Comments
Most helpful comment
Do we foresee this moving forward at any point? Thanks.