Start by choosing some fonts! When prompted to configure your kit, include s.codepen.io & *.codepen.plumbing in the domain listing.
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 & *.codepen.plumbing to the domains field, then save your settings and republish your kit.
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.
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.
Find the Typekit name for any font family in the kit editor by clicking the "Using fonts in CSS" link under Selectors.
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.
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.