TypeKit Proxy App

An application to proxy Adobe TypeKit JS Embed and CSS files with font-display modification to improve webpage performance.

Demo

https://typekitproxy.com/

JS Example

https://typekitproxy.com/yyj6orp.js

CSS Example

https://typekitproxy.com/yyj6orp.css

Motivation

In September 2020, TypeKit has released a font-display option via Adobe Fonts Dashboard for better web performance.

Knowledge Base Article: https://helpx.adobe.com/fonts/using/font-display-settings.html

1. In your web projects page, click Edit Project.

2. Select any of the following font-display values from the sidebar. By default, the font-display setting of web font projects is set to auto

But, the same functionality is not extended to RESTful API or JS Embed.

Google Lighthouse recommends to use font-display: swap in @font-face style to avoid FOIT and FOUT in most modern browsers.

Google Fonts supports same feature by just adding the &display=swap parameter to the end of your Google Fonts URL

Google Fonts Example

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Code Example

Load TypeKit by JS

Example JS: https://use.typekit.net/yyj6orp.js

The TypeKit is hosted on Adobe's CDN with "display":"auto" under window variable window.Typekit.config.

Using the TypeKitProxyApp, it can be changed to "display":"swap"

JS Example

<script type="text/javascript" src="https://typekitproxy.com/yyj6orp.js"></script>
<script type="text/javascript">try{Typekit.load({async:true});}catch(ex){console.log(ex)}</script>

Load TypeKit by CSS

Example CSS: https://use.typekit.net/yyj6orp.css

The TypeKit is hosted on Adobe's CDN with font-display:auto property for all the @font-face.

Using the TypeKitProxyApp, it can be changed to font-display:swap

CSS Example

<link href="https://typekitproxy.com/yyj6orp.css" rel="stylesheet">

License

Please see the license file for more information.