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.
Follow the web font tutorial to choose some fonts and create your web project.
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.
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.
The font-family name to use in the CSS is listed in the web project as well; read more about using fonts in CSS.
Public Pens can be forked, allowing other users to build on your code. The web fonts will work in the forked Pen as well.
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.