Syntax theme "pass-through" font?


#1

I’d like to optimize my theme for my use using a given font and weight, and I was wondering if there’s a way to set the CSS cascade to simply fall through to the font the user chose in the Settings panel?

For example, I have this for .entity.name.tag:

  font-family: 'SourceCodePro-Semibold', monospace;

Which works perfectly if you have Source Code Pro installed, but if you don’t you get the system Monospace.

Can this be done?


#2

IIRC, the font setting is done via code, i.e. there is code that reads the settings and then that code pokes the font into the generated HTML.

So what you can do? I’m not sure. Maybe tell CSS to set the xyzzy font if Source Code Pro is not installed, and then add code that replaces the xyzzy font with the settings font, wherever set? I haven’t tried this though. I’m kind of afraid horrible things will happen for people who don’t have the xyzzy font installed (which would be most people).


#3

I could do
font-family: 'SourceCodePro-Semibold', Menlo, Consolas, Monaco, 'Courier New', monospace;
I suppose…

But it would be nice to offer the Source Code enhanced version, perhaps with a tick-mark in the setting window “use theme font” or “use my fonts”.

I’m not really sure how to do that, though.


#4

There is an issue about allowing Syntax themes to define the font: https://github.com/atom/atom/issues/5355

In the mean time I could see 2 options:

  1. Bundle the SourceCodePro font together with your syntax theme. But then it can’t get changed in the settings.
  2. Add a warning in the README that it’s highly recommended to install the SourceCodePro font. But probably not everyone reads README’s, so I wouldn’t rely on that.

#5

It would be perfect if “monospace” in the LESS file simply translated to “what the user set in settings”

As I said, I tried monospace but I got a serif mono font, not the default in my settings. Or event the system default (on Mac Yosemite, I believe that would be Menlo).


#6

I was hoping that

font-family: 'SourceCodePro-Semibold', inherit;

would work. -> If SourceCodePro doesn’t exist, just inherit it. But unfortunately, it doesn’t seem to.


#7

You can check if the font is installed, and when it is add a class that has font-family: SourceCodePro-Semibold;


#8

I use this in isotope-ui to have the ui match the editor font:

 body.style.fontFamily = atom.config.get('editor.fontFamily')

Perhaps you can do something similar?


#9

Dunno, @braver isn’t that JS? I don’t think you can use JS anywhere in a syntax theme?


#10

Perhaps someday a LESS variable can be created for “editor font” and we can use that. For now, I’ve limited my extracurricular font fun to my local install via style.less

 // when using "Input" custom 4-font font

atom-text-editor::shadow .comment,
atom-text-editor::shadow .punctuation.definition.comment.html,
atom-text-editor::shadow .punctuation.definition.comment.js,
atom-text-editor::shadow .punctuation.definition.comment.css {
  font-style: italic;
}
atom-text-editor::shadow .string {
  font-style: italic;
  font-weight: bold;
}
atom-text-editor::shadow .entity.name.tag {
  font-weight: bold;
}
atom-text-editor::shadow .entity.name.tag.css,
atom-text-editor::shadow .entity.name.tag.scss {
  font-weight: normal;
}


// when using source code pro
atom-text-editor::shadow .comment,
atom-text-editor::shadow .punctuation.definition.comment.html,
atom-text-editor::shadow .punctuation.definition.comment.js,
atom-text-editor::shadow .punctuation.definition.comment.css {
  font-style: italic;
  font-family: "SourceCodePro-It";
}
atom-text-editor::shadow .entity.name.tag {
  font-family: "SourceCodePro-medium";
}
atom-text-editor::shadow .string {
  font-family: "SourceCodePro-light";
}
atom-text-editor::shadow .punctuation.definition.string {
  font-family: "SourceCodePro-medium";
}

#11

Yes it is, but why shouldn’t you be able to do that? It’s just a package. Same goes for UI themes: I don’t think they really intended having a lot of js there but there’s nothing stopping you.