Use TypeKit fonts in Atom?


#1

TypeKit fonts which are synced to my desktop don’t show up in Atom. The fonts work in other applications including Sublime Text.

I am adding the font through the Settings GUI.

Am I missing something or are these fonts actually not available for use in Atom at the moment?

I’m not sure if this is a bug or a feature that needs to be added.
I’m running atom 0.150.0 on Windows 8.1


#2

They should be available. I tried this:

  1. Synced https://typekit.com/fonts/source-code-pro to my desktop.
  2. Added Source Code Pro into Atom’s Font Family field in the settings.

and worked fine, although I only tested this on OS X 10.10. Not sure if that’s the reason.


#3

Huh, yeah, Source Code Pro works for me too.

I originally was trying with Museo because it’s the first one that came to mind that I knew I already had synced. Museo and Museo Sans don’t work for me but Source Code Pro does.

Source Code Pro is what I was going for anyway, so it doesn’t really matter to me that other fonts don’t work, but it is strange.

Thanks


#4

That’s interesting. I have a free Typekit account and it only lets me install a few fonts to try. For Museo I’d have to upgrade. So maybe they add some kind of DRM to those fonts and Atom can’t read them. But that’s just a wild guess.


#5

It’s just a guess as I doesn’t use Typekit for this kind of stuff, but it may comes from the font family not matching the value you set in your config. I know I had to battle for some time on a project involving rendering stuff in phantomjs (webkit-based) that were using system fonts. I couldn’t figure the proper value to use as individually some font variants name were confusing regarding the font-family that my system was reporting, and in the end I had to use the example provided in the following post to list the fonts on my system in the way the browser was seeing them:

http://hasseg.org/blog/post/526/getting-a-list-of-installed-fonts-with-flash-and-javascript/


#6

That’s a good theory. You mean a font might be spelled “Font Name”, “FontName” “font-name” etc? Yeah, I have seen people use different variants in @font-face.

Something Atom could do is show a <select> with all the available fonts, instead a text input. No idea how easy to do, but I’ll make an issue anyways. :innocent: https://github.com/atom/settings-view/issues/286


#7

More or less, for instance, I had to use the Univers system font (performance wise system fonts are loaded faster than fonts loaded with font-face, which was the starting point of the changes we made in our project). When using @font-face rules I just point to a font file and give it an arbitrary name to use in the css. But for system fonts it get trickier. We were using two variants, Univers Condensed and Univers Bold Condensed. My system (OSX) show me these fonts under the following names: Univers LT Std 57 Condensed and Univers LT Std 67 Bold Condensed.
In graphical softwares (such as Photoshop) these fonts are available under Univers and it can build faux-bold and faux-italic when needed so using them is pretty straightforward.
But to make it work properly in Webkit I had to use Univers LT Std as font-family name and play with font-style, font-stretch and font-weight to make it work.

Sadly there’s no browser API to list the available fonts (hence the flash applet), and while linux has the fc-list command, other systems (in my knowledge) lack of command to list system fonts. So I doubt a solution will come anytime soon except by patching chrome to expose a JS API for that.


#8

Thanks for the insights. There is actually already another issue about it: https://github.com/atom/settings-view/issues/57