How to display Github source code using San Francisco font
Github UI is nice and well crafted, but I always thought that its source code default font (Consolas) was… well, a little off.
So I was pleased when I discovered that they are actually setting the monospaced version of San Francisco as their primary font family:
San Francisco happens to be the default Apple font for iOS, Mac OS and whatever-OS.
Wait, what? I’m on a High Sierra OS powered Macbook. Why I’m I seeing Consolas instead of SF? Shouldn’t SF be available in my installed fonts?
Well, looks like it doesn’t. SF Mono is only available in your Terminal and inside Xcode. Luckily, the font files are available in your computer, so we can pull them out, install the font and make it available everywhere. Here’s how
Disclaimer: SF Mono is only available in Sierra and later versions of MacOS. The following trick(?) will not be applicable to prior versions.
How to install SF Mono on your Mac system
Launch your Terminal app and run the following code:
cp -R /Applications/Utilities/Terminal.app/Contents/Resources/Fonts/. /Library/Fonts/We are copying all files from Terminal app font resources to /Library/Fonts, where our available fonts are placed.
You could also open the Terminal Fonts folder in Finder, select all the fonts and install them using the font inspector of Font Book.
Bam! SF Mono is now available everywhere in our system. This means that browsers will be able to find that SFMono-Regular font that Github was asking for.
The result
This is Github before installing SF Mono:
and this is Github using SF Mono for its source code:
And that’s it! Now Github uses SF Mono Regular, which I like it better.
I wish SF Mono had ligatures, then I would also use it in Visual Studio Code. I’m sticking to Fira Code for now!
