CodePen is a web-based HTML, CSS, and JavaScript code editor that lets you experiment with code right in the browser. You can use custom fonts from Typekit right in your Pens.

If you don't have a Typekit subscription yet, sign up for any of our plans.

Choose your fonts and configure the kit

Start by choosing some fonts! When prompted to configure your kit, include "s.codepen.io" in the domain listing.

Adding CodePen domain to the kit

To use one of your existing kits in CodePen, click Kit Settings in the upper right corner of the kit editor. Add "s.codepen.io" to the domains field, then save your settings and republish your kit.

Add the Typekit embed code to the Pen

Your Typekit embed code can be added to CodePen UI in the “Stuff for <head>” field in the HTML editor’s settings menu or in the "CSS > Add External CSS" menu

To find the embed code for your kit, click the “embed code” link at the top right of the kit editor. Copy and paste the default CSS embed code into one of those locations.

Using Codepen with the default CSS embed code
Using Codepen by directly linking the CSS file

Use the fonts in your CSS

Now you can use the Typekit font-family names in the Pen’s CSS editor, and the fonts will immediately be visible in the Live View.

Pen with Typekit font applied

Find the Typekit name for any font family in the kit editor by clicking the "Using fonts in CSS" link under Selectors.

CSS information in the kit editor

Forking Pens

Public Pens can be forked, allowing other users to build on your code. Typekit fonts will work in a forked Pen as well, since the domain name is the same (s.codepen.io). Note that pageviews from those Pens will be counted towards the limit on the Typekit subscription that owns the original kit.

Deleting a kit or canceling your account

If you delete the kit that you are using on CodePen, or cancel your Typekit subscription, the fonts will no longer be available to any of the Pens which use that kit. This includes your original Pen, as well as any Pens that were forked from it. The fallback fonts specified in the CSS will be applied in place of the Typekit fonts.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy