DEV Community

Cover image for I Built a Site for the Best Coding Fonts
Mostafa Gaafar
Mostafa Gaafar

Posted on • Updated on

I Built a Site for the Best Coding Fonts

I'm always looking for a coding font that looks great with my favorite editor theme and language. Searching for coding fonts has been a pain since there is no way to see how a font will look until you download and install the font, then change your editor to use it.

Enter Dev Fonts

devfonts.gafi.dev is a list of the best coding fonts I could find around, along with an interactive preview where you can change the preview theme, code language, or the code sample for the preview.

Dev Fonts screenshot

My current favorite font is Cascadia Code. What is yours?

The source code for the site is on github

PRs for missing fonts are welcome, check the notes here

Discussion (67)

Collapse
codemouse92 profile image
Jason C. McDonald • Edited

Nice! Thanks for building this.

My favorite coding font is Hack, but I don't see it!

Collapse
gafi profile image
Mostafa Gaafar Author

Added it. Thanks!

Collapse
bushblade profile image
Will Adams • Edited

Hack for me too. Nerd patched.

Collapse
achimoraites profile image
Achilles Moraites

Thanks for sharing!
My favorite font is JetBrains Mono :)

Collapse
picwellwisher12pk profile image
Amir Hameed • Edited

How about a Vote feature, or a Like feature to bring up figures of most liked or used font(s)?

Collapse
gafi profile image
Mostafa Gaafar Author

It'd be great but it comes with the complexity of managing a backend or a service for authentication & storage. Do you know a simple way to implement it?

Collapse
benbao profile image
Benjamin Bromberg

Great tool! Like many others I found my way to JetBrains Mono but alternatives are always good to have.

For simple backend features hooking up firebase or amplify might be simple enough and probably free.

Collapse
picwellwisher12pk profile image
Amir Hameed

I understand. I shall look for a way to do that in a simple way. If you need my help, let me know.

Collapse
denislapi profile image
Denis Lapi • Edited

Nice work, I really like it!! :)
I played a bit around with the app. What do you think about having two fonts/column per row maybe?
It will increases the possibility to compare more fonts with less scrolls.
Something like this: prnt.sc/rzxqs3

Collapse
heikokanzler profile image
Heiko Kanzler πŸ‡ͺπŸ‡Ί • Edited

Great one. Glad to see that I am not the only one who loves to have a great looking font in my Editor.
One feature suggestion: support the preview of italics as-well.

My current favorite is JetBrains Mono.
May I recommend to add Input Mono aswell? It's also a very thought coding font.

Collapse
daveyjake profile image
Davey Jacobson

Input Mono was my go-to until JetBrains Mono came along.

Collapse
gertvdv profile image
Gert Van de Ven

Great job Mostafa! I was actually trying to figure out which font to use on my new laptop. This helps a lot to get a great overview.

Some feedback:

  • It took me a few seconds to figure out the compare mode
  • When a name is filtered, and compare is on especially, I was wondering why it only showed me one. This might be the preferred behavior, but got me confused.
  • When switching between themes, it always flashes to white in between.

Other than that! Awesome work, keep it up!

Collapse
mburszley profile image
Maximilian Burszley

It took me a while, but when it added ligatures, it became my go-to: Iosevka

Collapse
teoulas profile image
Theodoros Orfanidis

Nice! There's a few fonts missing:
Input Mono: input.fontbureau.com/
Fantasque Sans Mono: github.com/belluzj/fantasque-sans

A useful addition would be the languages/scripts supported. Most of them cover Latin, but there are fonts that support Cyrillic, Greek, etc.

Collapse
gafi profile image
Mostafa Gaafar Author

I can't keep up with all the font requests, feel free to open a PR if you want github.com/Gaafar/dev-fonts/blob/m...

Collapse
nicholascloud profile image
Nicholas Cloud

This is awesome, and makes me happy.

Just a reminder, if you use Homebrew on OSX there is a font cask from which many of these can be installed: github.com/Homebrew/homebrew-cask-...

And likewise, if you use scoop for Windows: github.com/matthewjberger/scoop-ne...

Collapse
sbu_05 profile image
Sibusiso Dlamini

I don't know the name of the font but its sublime text-default. There is just something about the sublime setup that appeals to my taste which is why its my favourite text editor. I can't explain but it makes my code look juicy or saturated unlike most themes which are often dry like VS codes default themes. But that's just my opinion :)

Collapse
saramiteva profile image
Sara Miteva

Great job! This is very useful.

Collapse
ulysess10 profile image
Jose Cerrejon

Cascadia Code is like the paid font OperatorMono. Thanks for share!.

Collapse
moslemhady profile image
Moslem

Thanks. my favorite one is 'JetBrains Mono'

Collapse
muhimen123 profile image
Muhimen

I just use Comic Sans. It's awesome! I can stare at it for a long time(when I don't find the bug)

Collapse
stokry profile image
Stokry

AwesomeπŸ˜€

Collapse
dmshvetsov profile image
Dmitry Shvetsov

Great idea! Super helpful!

Collapse
mindset profile image
Jayesh Tembhekar ⚑ • Edited

Never seen an idea like this.
A library of fonts.
Its very helpful and looking cool.
I am using Cascadia code πŸ˜‡
Thanks for this :)

Collapse
abdurrkhalid333 profile image
Abdur Rehman Khalid

Nice Job, Respected Sir, I am also looking forward to trying some of your favourite fonts as well.

Feeling Excited as well.

Collapse
hugoliconv profile image
Hugo

Thanks, it's pretty cool

Collapse
malitov profile image
Pavlo Malitov

Awesome work!
My favorite font is JetBrains Mono. Before was Fira Code.

Collapse
admarko profile image
Alex Markowitz

DankMono - will never use anything else

Collapse
gafi profile image
Mostafa Gaafar Author

added it to the list!

Collapse
jefflindholm profile image
Jeff Lindholm

My favorite is Dank Mono (dank.sh) it is not free but at 40.00 or so it is less than Operator Mono and has ligatures and a good italic.

Collapse
gafi profile image
Mostafa Gaafar Author

added it!

Collapse
artoodeeto profile image
aRtoo

Damn! This is really helpful! Thank you!

Collapse
tunnckocore profile image
Charlike Mike Reagent

Definitely. Still. Fira Code.

Collapse
lreiner profile image
Lukas Reiner

Nice one. Really needed this

Collapse
abdallahyashir profile image
Abdallah Yashir

Thank you for the site :)
I am currently using JetBrains Mono.
How can I download the Lilex?
IBM Flex Mono with ligatures would be amazing.

Collapse
gafi profile image
Mostafa Gaafar Author

You can download Lilex from its github releases page github.com/mishamyrt/Lilex/releases

Collapse
bolironman profile image
Bo Li

pretty good! It makes me back to Iosevka :D
thank you

Collapse
donnisnoni profile image
Don Alfons Nisnoni

Great tools man!!! Very helpful!!!

Collapse
ben profile image
Ben Halpern

Neat

Collapse
oliverandrich profile image
Oliver Andrich

Indeed a nice site and a nice way to compare various fonts. ❀️