List of the best fonts for coding with live preview devfonts.gafi.dev
- Live preview of all fonts with your code samples
- Select specific fonts to compare
- Choose editor themes
- Choose your language for syntax highlights
- Gatsby
- Code Mirror editor
- Ant Design
- Inspired by (code stolen from) https://carbon.now.sh/
- Hosted on Netlify
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: 2for fonts with ligatures,sort: 3for others - Do not change other files or file formatting apart from adding the new font