Giter Club home page Giter Club logo

firacode's Introduction

Fira Code: free monospaced font with programming ligatures

Fira Code

Read in Español | 简体中文 | 日本語

Problem

Programmers use a lot of symbols, often encoded with several characters. For the human brain, sequences like ->, <= or := are single logical tokens, even if they take two or three characters on the screen. Your eye spends a non-zero amount of energy to scan, parse and join multiple characters into a single logical one. Ideally, all programming languages should be designed with full-fledged Unicode symbols for operators, but that’s not the case yet.

Solution

Fira Code is a free monospaced font containing ligatures for common programming multi-character combinations. This is just a font rendering feature: underlying code remains ASCII-compatible. This helps to read and understand code faster. For some frequent sequences like .. or //, ligatures allow us to correct spacing.

Download & Install

Fira_Code_v6.2.zip - December 6, 2021 - 2.5 MB

Then:

Sponsors

Fira Code is a personal, free-time project with no funding and a huge feature request backlog. If you love it, consider supporting its development via GitHub Sponsors or Patreon. Any help counts!

Huge thanks to:

WorkOS
Your app, enterprise-ready.
Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months.

What’s in the box?

Left: ligatures as rendered in Fira Code. Right: same character sequences without ligatures.

Fira Code comes with a huge variety of arrows. Even better: you can make them as long as you like and combine start/middle/end fragments however you want!

Fira Code is not only about ligatures. Some fine-tuning is done for punctuation and frequent letter pairs.

Fira Code comes with a few different character variants (cv01, cv02, etc), stylistic sets (ss01, ss02 , etc) and other font features (zero, onum, calt, etc), so that everyone can choose what’s best for them. How to enable

Some ligatures can be altered or enabled using stylistic sets/character variants:

Being a programming font, Fira Code has fantastic support for ASCII/box drawing, powerline and other forms of console UIs:

Fira Code is the first programming font to offer dedicated glyphs to render progress bars:

In action:

We hope more programming fonts will adopt this convention and ship their own versions.

Unicode coverage makes Fira Code a great choice for mathematical writing:

How does it look?

Editor compatibility list

Works Doesn’t work
Arduino IDE (2.0+,same instructions as vscode) Adobe Dreamweaver
Abricotine Delphi IDE
Android Studio (2.3+, instructions) Standalone Emacs (workaround)
Anjuta (unless at the EOF) IDLE
AppCode (2016.2+, instructions) KDevelop 4
Atom 1.1 or newer (instructions) Monkey Studio IDE
BBEdit (14.6+ instructions) UltraEdit (Windows)
Brackets (with this plugin)
Chocolat
CLion (2016.2+, instructions)
Cloud9 (instructions)
Coda 2
CodeLite
CodeRunner
Comma (Under: Preferences > Editor > Font)
CotEditor
Eclipse
elementary Code
Geany (1.37+)
gEdit / Pluma
GNOME Builder
Godot
GoormIDE (instructions)
gVim (Windows, GTK)
IntelliJ IDEA (2016.2+, instructions)
Kate, KWrite
KDevelop 5+
Komodo
Leafpad
LibreOffice
LightTable (instructions)
LINQPad
MacVim 7.4 or newer (instructions)
Mancy
MATLAB (instructions)
Meld
Mousepad
NeoVim-gtk
NetBeans
Notepad (Windows)
Notepad++ (instructions)
Notepad3 (instructions)
Nova
PhpStorm (2016.2+, instructions)
PyCharm (2016.2+, instructions)
QOwnNotes (21.16.6+)
QtCreator
Rider
RStudio (instructions)
RubyMine (2016.2+, instructions)
Scratch
Scribus (1.5.3+)
SublimeText (3146+)
Spyder IDE (only with Qt5)
SuperCollider 3
TeXShop
TextAdept (Linux, macOS)
TextEdit
TextMate 2
UltraEdit (UEX) (Linux)
VimR (instructions)
Visual Studio (2015+, instructions)
Visual Studio Code (instructions)
WebStorm (2016.2+, instructions)
Xamarin Studio/Monodevelop
Xcode (8.0+, otherwise with plugin)
Xi
Probably work: Smultron, Vico Under question: Code::Blocks IDE

Terminal compatibility list

Works Doesn’t work
crosh (instructions) Alacritty
Hyper (see #3607) Asbru Connection Manager
iTerm 2 Cmder
Kitty ConEmu
Konsole GNOME Terminal (ticket)
Mintty gtkterm (ticket)
QTerminal guake (ticket)
st (patch) LXTerminal (ticket)
Tabby mate-terminal
Terminal.app PuTTY
Termux rxvt
Token2Shell sakura (ticket)
Wez’s terminal SecureCRT
Windows Terminal Terminator (ticket)
ZOC (macOS) terminology
Tilix
Windows Console
xfce4-terminal (ticket)
xterm
ZOC (Windows)

Browser support

<!-- HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/distr/fira_code.css">
/* CSS */
@import url(https://cdn.jsdelivr.net/npm/[email protected]/distr/fira_code.css);
/* Specify in CSS */
code { font-family: 'Fira Code', monospace; }

@supports (font-variation-settings: normal) {
  code { font-family: 'Fira Code VF', monospace; }
}
  • IE 10+, Edge Legacy: enable with font-feature-settings: "calt";
  • Firefox
  • Safari
  • Chromium-based browsers (Chrome, Opera)
  • ACE
  • CodeMirror (enable with font-variant-ligatures: contextual;)

Projects using Fira Code

Alternatives

Free monospaced fonts with ligatures:

Paid monospaced fonts with ligatures:

Building Fira Code locally

In case you want to alter FiraCode.glyphs and build OTF/TTF/WOFF files yourself, this is the setup I use on macOS:

# install all required build tools
./script/bootstrap_macos.sh

# build the font files
./script/build.sh

# install OTFs to ~/Library/Fonts
cp distr/otf/*.otf ~/Library/Fonts

Alternatively, you can build Fira Code using Docker:

# install dependencies in a container and build the font files
make

# package the font files from dist/ into a zip
make package

If you want to permanently enable certain style sets or character variations, maybe because your editor of choice does not allow you to toggle these individually, you can provide the desired features as a comma separated list to the build script via the -f / --features flag.
Default: none.

To separate different versions of your font you can specify the desired font family name with the -n / --family-name flag. The special value 'features' will append a sorted, space separated list of enabled features to the default family name.
Default: "Fira Code"

You can also limit the font weights that will be created with the -w / --weights option.
Default: "Light,Regular,Retina,Medium,SemiBold,Bold"

# locally in your shell
./script/build.sh --features "ss02,ss08,ss10,cv03,cv07,cv14" --family-name "Fira Code straight" --weights "Regular,Bold"

# or via a docker container (creates the family name 'Fira Code cv01 cv02 cv06 cv31 onum ss01 ss03 ss04 zero')
docker run --rm -v "${PWD}":/opt tonsky/firacode:latest ./script/build.sh -f "cv01,cv02,cv06,ss01,zero,onum,ss03,ss04,cv31" -n "features"

# in Git Bash from Git for Windows, or any other MSYS2 based shell, you might need to disable path conversion
MSYS2_ARG_CONV_EXCL="*" docker run --rm -v "${PWD}":/opt tonsky/firacode:latest ./script/build.sh -f "ss02,ss03,ss04,ss05,ss06,ss07"

Credits

firacode's People

Contributors

acnoway avatar davelab6 avatar dominionized avatar drify avatar dsejas avatar ecerulm avatar eltociear avatar goooler avatar j-f1 avatar joshka avatar jsoref avatar matan-h avatar moshuying avatar ollicle avatar paitoanderson avatar philippsoehnlein avatar polo2ro avatar qrqiuren avatar rojepp avatar rossjrw avatar sam-rad avatar shalokshalom avatar snan avatar tangibletoofa avatar thaliaarchi avatar thundernixon avatar tonsky avatar vladwinner avatar vorburger avatar wiznillyp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

firacode's Issues

Wrong ligature for ?:

I'm using Atom 1.1 with Fira Code (It's awesome!), but I noticed ?: renders to a quite odd symbol.

This is the plain text:

type U = {
    aaa?: string // ?: means an optional property
    bbb?: number
}

function F(aaa?: string, bbb?: number) {
    // ?: means an optional parameter
}

Here is what I see:

This strange ligature symbol makes no sense to me, it would be better to have no ligature at all here.

No TTF in 0.6

It looks like there's no longer a TTF file as of 0.6, was this intentional?

Doesn't work in Kate while Hasklig works

Tested this font in Kate (Kubuntu 14.04 [x64]). It doesn't do any any ligature substitution, unlike Hasklig, which works fine.

I think you need your own list of [tested] supported programs instead of referring to the Hasklig's list.

Add support for --> operator

There is a common idiom in C and C++

for(int i = N; i --> 0;) {
    ...
}

This code looks ugly with FiraCode. Maybe it is possible to add corresponding ligature for this?

Pinyin characters

It looks like there are some pinyin characters that aren't supported in this font just yet, and I was wondering if they're on the roadmap to support in the future?

screen shot 2015-09-05 at 10 38 27 am

The problem characters pictured are:

character description oct dec hex html
ú latin small letter u with acute 0372 250 0xFA &uacute;
ū latin small letter u with macron 0553 363 0x16B &#363;
ǎ latin small letter a with caron 0716 462 0x1CE &#462;

Powerline support

Powerline + ligatures seems to be the perfect programming font. Sure you can patch the font yourself, but builtin support will result in way more beautiful results.

This is more a feature request / wishlist than a real issue. Feel free to close the issue if it is out of scope. Thanks and keep going 👍

Doesn't work in QtCreator while Hasklig works

I've just downloaded FiraCode 0.1 and Hasklig 0.4, and tested them in QtCreator 3.2.2 on Fedora Linux 20 x64. It seems that FiraCode doesn't do any ligature substitution, unlike Hasklig, which works fine. What could I've done wrong?

Modify Fira Sans as well

Although controversial, applying the same ligatures to Fira Sans can make for an interesting programming experience.

C/C++ bitwise xor similar to logical and

Hi, really enjoy the font, but i recently noticed that the logical and (&&) and the bitwise xor (^) are indistinguishable.
This is what you would see in a C program:

a ∧ b // a and b
a ^ b // a xor b

I guess this is less problematic, but c++ uses && to denote rvalue references, eg:

auto fun(Type&& value);

Powerline support in 0.6

Hi there!
You've announced Powerline support in the 0.6 version, but it seems, they've added a bit buggy:

Also, I've noticed a little offset to the right side for ± symbol (and bottom part of + seems like cutted), and, somewhy, coloured circles (at the right side, which, actually, using same symbol in all three cases) has some positional offsets (yellow one looks like a bit divided at the left side, and red one looks smaller than yellow). I think, that is somehow related to not-really-monospaced nature of the ligatures for that symbols in the font. Maybe, due to some bug during powerline-patching, or so. How do you think?

firacode_artefacts

Future ideas

Markdown: ## ### ####
URL: :// :///
Haskell: <* <+ <$ $> *> +>

How do you set monospace attributes?

I had to change advanceWiths to be the same for my monospaced font to work in qVIM on windows (larsenwork/monoid#23)

I'd like to add ligatures to my font too but wouldn't want to break support for VIMs - what have you done to circumvent this issue?

Smalltalk ligatures

The following sequences might appear in Smalltalk code:

  • ~~ “Not identical”
  • ~= “Not equal” (as != in other languages)
  • #[ Start of a literal byte array
  • [ ] [: Start of a block with arugments
  • [ ] ]]] End of multiple blocks.

Example

MyClass>>myMessageWith: aNumber otherThing: anObject

    aNumber ~= anObject ifTrue: [
        anObject ~~ #mySymbol ifFalse: [
            ^ #[ 43 54 26 123 33 45 98 192 158 158]]].
   "consider anObject as a collection"
   ^ anObject inject: aNumber into: [:sum :each | sum + 3 * each]

fn to &#955;

I've seen in someone emacs:

(fn [] ... ) => (λ [] ...)

Erlang syntax for <= and =<

<= Is used in Erlang for binary comprehensions and not equivalent to =<

1. << << (digit(I)) >> || <<I:4>> <= Bin >>. %
2. A =< B. %

Perhaps such a solution through the separation of font styles?

Perl matching operators (<=>, =~, !~, ~~)?

I'd like to see ligatures for Perl matching operators, specifically:

  • "<=>" → "⟺" (3 chars wide)
  • regex match, "=~" → "≂" or "⋍"?
  • regex non-match, "!~" → same, struck through?
  • smartmatch operator, "~~" → (double tilde)?

What would it take to get ligatures working in emacs?

I'm doing a lot of F# in emacs lately and find that I'd love to have this on my emacs like I do in Visual Studio.

I'm mostly looking for a starting point to work out what I would need to do to get the ball rolling myself.

Binomial operators for R

R has a number of binomial operators with the pattern %X% that might be good candidates for ligatures.

%>%, pipe operator, passes result to next function
%in%, matching logical operator, e.g., x %in% table means "does x exist in table?"
x %% y, modulus
x %/% y, integer division
x %*% y, matrix multiplication
x %o% y, outer product
x %x% y, kronecker product

Not sure the best visual approach for these. Probably best that the % symbols remain present in some form, but are visually less emphasized than the center characters.

-> ligature doesn't seem to work on VS2013 / Windows 7

Repro steps:

Download font from https://github.com/tonsky/FiraCode/releases/download/0.5/FiraCode-Regular.otf
Open Control Panel > Fonts
Drag font from download into font window
Open Visual Studio Express 2013
Tools > Options > Environment > Fonts and Colors
Select Fira Code 9 pt and click OK
The >>= ligature works as do all the other ones I tested, except the -> ligature doesn't work

Any idea what's going on here? Is VS overriding that ligature? Or is the font bugged?

C# Doc Comments

By default C# (or at least the Visual Studio autocompletion) uses three slashes to mark a documentation comment before a type or method:

/// <summary>
/// This class does the things with the stuff.
/// </summary>
public class Widget
{
  // ...
}

On Visual Studio Community 2013, Fira Code 0.3, this renders in a rather unfortunate way (in my opinion):

font rendering

Is there a way to scoot that third slash closer to the others?

Doesn't work at all in Emacs

I know Emacs doesn't support ligatures, but I was still hoping to use Fira Code in Emacs since it has less line spacing or lower line height than Fira Mono. But this is what I see when I use Fira Code in Emacs:

screenshot

Ligature for !==

Fira code has liagtures for === and !=, but not for !==.

@tonsky I think !== it is important, because any JS llinter force you to use it.

Forward pipe operator |> (F# and Elixir)

A forward pipe operator is a nice syntax sugar present in F# and Elixir (and maybe in some other languages) which allows to rewrite

odd? = fn(v) -> rem(v, 2) != 0 end
Enum.sum(Stream.filter(Stream.map(1..100_000, &(&1 * 3)), odd?))

as

odd? = fn(v) -> rem(v, 2) != 0 end
1..100_000  |> Stream.map(&(&1 * 3))  |> Stream.filter(odd?) |> Enum.sum

or on multiple lines:

1..100_000 
 |> Stream.map(&(&1 * 3)) 
 |> Stream.filter(odd?) 
 |> Enum.sum

This is an awesome operator as it makes it very visible that FP is all about a flow of transformations of data.

Would you consider including it into FiraCode? To be honest I have a very vague idea what symbol it should be, as all nice arrows have already been used

More conservative ligatures?

I find a lot of the ligature "collapsing" to be awesome, but the ligature "transforming" less so, as it seems less legible. That is, the collapse of != into the not equal ligature doesn't read the same (and in the back of my mind, I think would not be applicable to all languages, and the same with <= and >=. Perhaps there could be an alternate version of the font that did a lot of the beautiful whitespace collapsing (the -> collapsing is great), without any of the transforms to symbols that don't directly correspond to the original characters?

kde support

I see that kate/kwrite/konsole are listed as 'should work'.
While they didn't in kde4, but they definitely work in plasma/kde 5
snapshot12

Ligature for "0x"

Hi

I think "0x" is good candidate for ligature. Is is used for example in Java in hax constants. For example:

int hexNumber = 0x200; // same as 512

On the other hand:

  • I guess it is not so common notation
  • would it corrupt another phrases? (eg. some numbers followed by x like "Your equation is 10x20. The result is 200")

Ruby ||=

Just a suggestion but I think we could make the ||= look a little better for Ruby

Current

screen shot 2015-05-28 at 12 31 12 am

Erlang's /= and =/=

Two more additions to inequalities would be nice: Erlang's inequality operators /= and =/=

Spurious whitespace being inserted

Any line which has ligatures in will end up with additional whitespace being inserted near the end of the line. As an extreme example the following line of Scala code:

private val dateTimePattern = """(\d\d\d\d)-(\d\d)-(\d\d)T(\d\d?):(\d\d?):(\d\d?)(?:\.(\d{1,3}))?(?:Z|[+-](\d\d)(?::?(\d\d))?)?""".r

Appears to have about 3 extra spaces before the closing quote marks. The cursor position is also thrown off by this which makes it hard to edit lines with ligatures.

It sure looks pretty though! ;-)

I'm viewing this in Atom 0.206 on OS X Yosemite in case that helps/is related to the issue. I've attached a screenshot of the problem.

screen shot 2015-06-05 at 10 17 26

Atom editor setup

Once the subpixel rendering issue (atom/atom#6055) is sorted I look forward to start using both FiraCode and Monoid in the Atom editor.

Here's a short tip for enabling ligatures, but not on the current line or in the Find and replace window. I pulled it off https://gist.github.com/larsenwork/255432b5101093fb07bc and modified it a bit.

styles.less

* {
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" on, "calt" on;
}

atom-text-editor::shadow .cursor-line {
  -webkit-font-feature-settings: "liga" off, "calt" off;
}

div.find-and-replace atom-text-editor::shadow .line {
  -webkit-font-feature-settings: "liga" off, "calt" off;
}

Add ==> and <==

==> can be used in certain Smalltalks as logical implication

moon isHamburger ==> man isBlack "is True"

<== is currently in no standard library but certainly possible

How to enable open type features in Sublime/Atom

On OS X I've specified the font family in Atom and Sublime 3 as 'FiraCode-regular' which enables the font but I'm not seeing any ligatures before I add text-rendering: optimizeLegibility; to my theme.

Are there any recommendations to enable open type features with FiraCode in Atom or Sublime?

Ignore this

First, copying the theme foder to the packages folder generated an endless cascade of error massages. Had to restart my computer.
After adding and renaming the folder with Sublime closed, things appeared to be better until tabs and other things started to turn completely black (foreground + background) so things were still there but invisible. That happened with tabs, the left sidebar and the search bar at the bottom.
Then I simply uninstalled and went back to the nice "blackboard" color scheme.

Bold version?

Is it possible to get bold/italic versions of the font included alongside the regular version? Right now, editors have to fake bold/italic, which breaks the monospaceness.

garbled font in gvim but not in terminal or vim

After setting font in gvimrc using set gfn=FiraCode\ 9, I opened gvim, I got this
screenshot from 2015-05-25 19 01 29

I set the terminal font to FiraCode, fonts in vim are showing as expected
screenshot from 2015-05-25 19 03 09

I rebuilt system font cache using fc-cache -fv just to be sure. I am on debian(8/jessie) linux.

This issue is only specific to gvim and with this font only, reproducible everytime. I tried this font with firefox, gedit, system ui font, everywhere it is working as expected. Previously, I was using Ubuntu mono with gvim, which was working normally.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.