Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Under your Editor Settings, you'll be able to choose from eight different fonts now, four of which are brand new!

  • Monaco / Courier - Standard issue monospace fonts preloaded on most operating systems. We just set the font-family, meaning no extra requests for fonts (fastest).

  • Inconsolata - By Raph Levien. We load from Google Fonts.

  • Source Code Pro - By Adobe. We load from Google Fonts.

The New Ones

We are hosting copies of these and loading via @font-face. They are either open source or we paid for a web font license.

We use Menlo (By Jim Lyles) as part of the default font stack in some places on CodePen. Menlo comes standard on OS X and is very very very similar to DejaVu Mono. Because it's so similar and and we're not sure how the licensing works for Menlo, we're just going to offer DejaVu as an editor choice for now. If you really love Menlo (and like that it doesn't require an extra request), you could use something like Stylebot to set it on .CodeMirror { } when you visit CodePen.io.