Using SF Mono in Atom


#1

Hi there,

On reddit you can find how to get the new Apple monospaced font SF Mono. :grin: Of course I wanted to give it a try, but when using it with Atom, it is always displayed in extra bold font weight. Things like font-weight: normal oder 400 won’t work. Anyone had this before?

Thanks,
John


#2

Hi John,
the solution to this problem is to use the PostScript name of the specific font weight you want to use.
For example:
font-family: “SFMono-Semibold”;

You can find this name in the Font Book.app (on a Mac). Just open the info panel of the selected font weight.

Hope this helps!

Best
Florian


#3

Hi Florian and thanks,

when using ‘SFMono-Regular’ in the settings panel, at least the “unformatted” text is displayed like that. But when the syntax theme uses styling like italic, then that again this displayed in heavy italics. See ‘function’ in the following example:

While with SF Mono (left) it is heavy italic, any other font I use will show up only italic. So it looks to me like “heavy” would be defined as the default font weight for SF Mono? Strange anyway.


#4

Yes, you’re right!
The only thing I can think of is deactivating certain font weights…


#5

It’s also possible that your syntax theme is asking for bold oblique but your other font doesn’t have bold oblique, so it just serves oblique. What does the CSS around function say? You can check out the CSS by opening the developer tools and navigating there or (more easily), opening a dev mode window and right-clicking to Inspect Element.


#6

I’ve tried this. The CSS ony requires font-style: italic;, nothing about the font-weight. Also the font on the right in the example screenshot above (it’s Input Mono by the way) does definitely have bold font weights. And I can choose any other font (with bold font weights), it’s always like in the right screenshot.

So the SF Mono is the exception in that case. And also, this only occurs in conjunction with Atom – in the Terminal.app or TextWrangler everything works fine.


#7

So you’re saying that:

  1. Most fonts, such as Input Mono, work properly in Atom
  2. SF Mono doesn’t work properly in Atom
  3. All fonts work properly in other applications (that use the macOS native font rendering)

This doesn’t indicate that Atom is necessarily at fault. This indicates that there is some interaction between SF Mono and Atom (and much more likely the Chromium rendering engine) that is causing the problem. So the open question is:

  • Does SF Mono work properly in Chrome? (Atom uses the Chromium font rendering engine, not the macOS native one.)

#8

Thanks leedohm, that’s an interesting point. As you predicted, Chrome renders the font the same way as Atom (or vice versa). They use the heavy weight font as default while Safari or Firefox use the regular style.

Anyway, when I deactivate the heavy style then everything works properly as SF Mono also provides a bold font weight.


#9

If you’re using macOS Sierra, you can use import-sf-mono package to make the SF Mono font in the Terminal available to Atom. :smiley: