Load individual TypeKit font families without JavaScript and without loading static kit

1.2k Views Asked by At

This and this were similar but did not help.

The goal is to load individual TypeKit font families similar to Google Fonts, but without loading a static kit and without JavaScript.

We cannot load a pre-defined kit since fonts are chosen by end users and may not conform to a static combination.

With Google Fonts, we can do something like this:

<link href="https://fonts.googleapis.com/css?family=Comfortaa:regular" rel="stylesheet">

According to this Adobe/TypeKit page, it's possible to embed fonts without JavaScript like this:

<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

However, this appears to only work at the kit level (pre-defined collection of fonts), not the font family level.

Is it possible to load this this Chinese font and all its weights, along with other dynamically defined fonts (1) without using JavaScript; and (2) without loading unnecessary font families?

1

There are 1 best solutions below

0
Bryce Howitson On

Yes, you can embed Typekit web fonts using a CSS (just like Google Fonts) however, you need to set up a TypeKit web project and register your domain before you can do that. Typekit fonts aren't free to use and Adobe wants to track how often they're used. (you can subset the fonts with that tool as well)

However, you'll still need to inject the font in some way to make it available to the browser. You can either include it in the served HTML on the server-side (eg PHP include) or inject it via javascript. Typekit should also give you the inject code for Javascript.

Or you can reference this Git Repo for different ways of loading web fonts.


Edit: All the font weights in a family

Also, you probably don't want to load all the weights in a specific family. I don't believe that a font's weight carries the same meaning in Asian writing as it does in western languages (eg bold = important). So to save on excess downloads, I'd specify only the weight that fits your design.

Perhaps someone who lives in that part of the world could weigh in?