Using web fonts with CodePen

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 web fonts right in your Pens.

Choose fonts to use

Follow the web font tutorial to choose some fonts and create your web project.

Add the embed code to the Pen

The 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 project, visit the Web Projects page and locate the project name. Copy and paste the default CSS embed code for that project into one of these locations.

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

Apply the fonts in your CSS

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

CodePen editor with web font applied

The font-family name to use in the CSS is listed in the web project as well; read more about using fonts in CSS.

CSS information in the web project page

Forking Pens

Public Pens can be forked, allowing other users to build on your code. The web fonts will work in the forked Pen as well.

Deleting a project or canceling your subscription

If you delete the project that you are using on CodePen or cancel your subscription, the fonts will no longer be available to any of the Pens which use that embed code. 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 custom web fonts.