gaafar / dev-fonts

List of fonts for coding

dev-fonts

List of the best fonts for coding with live preview devfonts.gafi.dev

Features

• Live preview of all fonts with your code samples
• Select specific fonts to compare
• Choose editor themes
• Choose your language for syntax highlights

Built with

• Gatsby
• Code Mirror editor
• Ant Design
• Inspired by (code stolen from) https://carbon.now.sh/
• Hosted on Netlify

Missing a font?

You can open an issue to request adding a new font or open a PR by adding the font under src/data/fonts.ts and static/fonts

• Include only woff2 (smaller download size). Use font squirrel with basic settings for conversion if needed https://www.fontsquirrel.com/tools/webfont-generator
• Using a font from an official, reliable CDN is preferred. If not available, then add it in static/fonts.
• Use sort: 2 for fonts with ligatures, sort: 3 for others
• Do not change other files or file formatting apart from adding the new font

dev-fonts's Issues

Feature request: Cyrillic and/or other non ASCII symbols preview/filter

From time to time we have non English texts in our work and if font does not support it, it looks really weird

Will be so nice if there will be some kind of checkbox to filter such fonts

Add Noctis High Contrast

Hi Mostafa,

Please, kindly add Noctis High Contrast theme: https://marketplace.visualstudio.com/items?itemName=Kamen.noctis-high-contrast

This is not a "yet another theme". It's the only pretty (balanced) dark high contrast theme that uses different color for inferred types (like types of let variable_name = expression; in Rust). Almost all other themes use the same color as the surrounding code, which can be confusing. But this theme makes it much more pleasant.

Thank you for considering.

Sugestion: Add Office Code Pro

https://github.com/nathco/Office-Code-Pro

Attached a screenshot of officeCode pro D with nerd fonts.
It's been my goto font for years. Looks really good in both my macbook retina screen and my external screen.

Suggestion: Add Fixedsys

https://github.com/kika/fixedsys

Add comments to showcase italics

Some fonts have distinct italic type as opposed to faux slanted version.
Please add comment to the code snipped formatted in italic to fonts with distinct cursive-like a, g, etc.

Add Recursive Mono

https://www.recursive.design/

Add Iosevka

Github Iosevka
Iosevka - Typeof.net

Suggestion: Add Ligalex font

Ligalex is an IBM Plex variant with ligatures. It can be found here: https://github.com/ToxicFrog/Ligaturizer/releases

Please add Pointfree

https://fontmeme.com/fonts/pointfree-font/

Add Courier New

Please add Courier New.

It's present everywhere, so usable for example on vscode.dev.

Language-based snippet swapping

Hi,

Love the idea. Just a feature request: it'd be nice if, when you switch language on top, the code snippets got swapped with a sample in the selected language.

Cheers

Add Geist Mono

Please add the new font Geist Mono from Vercel

"Java" syntax highlighting Issue

when i changed language to "Java", syntax highlighting did not working.

Add Cartograph

Although I'm not sure how displaying a commercial typeface works. 🤔

https://connary.com/cartograph.html

Font request: Operator Mono / Operator Mono ScreenSmart

The font lives here: https://www.typography.com/fonts/operator/overview

Note: This is a (rather expensive) commercial font.

Add Go Mono

https://blog.golang.org/go-fonts

Add ProFont

ProFont can be found at https://tobiasjung.name/profont/ in different formats. It's quite old but still works on Windows 10 in my Sublime Text 3 editor.

Add Calling Code and Code Saver

Calling Code on Adobe Fonts: https://fonts.adobe.com/fonts/calling-code

Calling Code on Dharma Type: https://dharmatype.com/calling-code

Code Saver on Dharma Type: https://dharmatype.com/code-saver

The Regular variant of both fonts are free.

Fira Ligatures not working

Grid view would be much better to compare

A grid view is much much better than a vertical view when comparing on my wide screen 1920x1080

Please add Input Sans

It lives here https://input.fontbureau.com

Ligature filter deselected

Hi, I believe there's a non-clear filter since deselecting the "Ligatures" checkbox only adds the non-ligature fonts to the results section.
I was expecting that deselecting/unchecking that option to only show fonts without ligatures

Suggestion: Add iA Writer font

I use iA fonts for more than a year in one of my projects.
I hop you can include it in this project.
Thanks in advance

Inconsolata ligatures?

Should Inconsolata not also have the ligatures: true tag here?

Putting '<?` breaks the editor in PHP Language mode

When I set a PHP language and put <? into a editor it breaks it.

Seems like indent is not a function based on console log.

Add Operator Mono

Link: https://www.typography.com/fonts/operator/styles