It just so happens that in my regular internet perusing lately, I came across three different new-ish fonts, all designed (at least somewhat) for coding. They are all open-source, so I figured we should make them available in CodePen!

You can always access your personal Editor Settings in the Settings area of the site, where you can change fonts and all sorts of other things about the editor.

I'll list the new fonts below with screenshots of how they look in one size with the Twilight theme active. But to really see if they are right for you you should activate them and give them a spin with your preferred sizing and colors.

JetBrains Mono

Courier Prime

Recursive

Limitations

We have to make some default choices when we load these fonts.

Say you like the bold in Courier Prime, but not really the italic. Well, I thought the italic was kinda nice, so we're setting code comments in that like we do with most other fonts, but we don't load the bold at all. That's just the way it is I'm afraid. Fine-grained control isn't available.

That may be especially a bummer with Recursive, since it's a variable font (our first on CodePen!). With variable fonts, you don't need to load alternate versions, the ability to control aspects of the font are built right in. So for example, we set the italics with special CSS like font-variation-settings: 'MONO' 1, "slnt" -10, "wght" 400;. So if you're interested in hacking on your own special User CSS (we can't support that, but hey, it's your browser), Recursive is probably the most fun one to play with since you can control so much with CSS.