typekit-loader

Parse Adobe TypeKit font-face css files server-side to have more control over them client-side.

Motivation

TypeKit is a pain to load, and usually managed by a client (thus loading too many fonts).

Installation

yarn add @kaliber/typekit-loader

Usage

A few steps are required for setup:

Add typekit key to your default.js.

You can leave fontNames out if you want to use all fonts in the css file.

typekit: {
  cssUrl: 'https://use.typekit.net/YOUR_TYPEKIT_ID.css',
  fontNames: ['font-family-name', 'other-font-family-name']
}

Add requestHandler to your app in routeMap.

function getRouteData() {
  return {
    app: {
      // ... other code
      fetch: {
        fonts: requestHandlers => requestHandlers.getFonts,
        // ... other requestHandlers
      }
    }
  }
}

Add getFonts to your app in requestHandlers.

import { getFonts } from '@kaliber/typekit-loader'

export const requestHandlers = {
  // ... other domains
  app: {
    // ... other routes
    async getFonts() {
      return getFonts(config.typekit)
    },
  }
}

Add TypeKitFontsScript to your head.

import { TypeKitFontsScript } from '@kaliber/typekit-loader'

<TypeKitFontsScript fontfaceObjects={data?.fonts?.stylesheet || []} cssUrl={config.typekit.cssUrl} />

(Optionally) Add TypeKitFontsPreloaders to your head.

import { TypeKitFontsPreloaders } from '@kaliber/typekit-loader'

<TypeKitFontsPreloaders fontfaceUrls={data?.fonts?.urls || []} />

Add fallback to your 500 page.

import { TypeKitFontsFallback } from '@kaliber/typekit-loader'

<TypeKitFontsFallback cssUrl={config.typekit.cssUrl} />

Pro-tip

Generate a fallback font through e.g. https://screenspan.net/fallback and add that to a fonts.css in your project.

Disclaimer

This library is intended for internal use, we provide no support, use at your own risk. It does not import React, but expects it to be provided, which @kaliber/build can handle for you.

This library is not transpiled.