[CLOSED] Add @sourceFontFamily LESS variable and use instead of SourceCodePro font-family

[core-ai-bot]

Issue by humphd
Monday Mar 09, 2015 at 19:45 GMT
Originally opened as adobe/brackets#10727

---

In my Brackets fork, I've been discussing ways to save on download size for the in-browser use case. @peterflynn and I discussed making it easier to turn off the use of the Source Code/Sans Pro web fonts in favour of system fonts (it ends up saving me about ~300K of gzipped download, which is great), see https://github.com/humphd/brackets/issues/78.

I've made a start at this, switching all explicit uses of these font-familys to variables. I'm unclear how much more I can do than this, since all of the other occurrences of these are in extension LESS/CSS files, and I don't think these have access to the variables in Brackets (correct me if I'm wrong and can change there too)?

• SourceSansPro uses - https://github.com/adobe/brackets/search?utf8=%E2%9C%93&q=sourcesanspro&type=Code
• SourceCodePro uses - https://github.com/adobe/brackets/search?utf8=%E2%9C%93&q=sourcecodepro&type=Code

Anything else I can do here? I'm not sure how to deal with the explicit use in extensions, especially when I rip out that font-family for the in-browser case.

cc@Pomax

---

humphd included the following code: https://github.com/adobe/brackets/pull/10727/commits

[core-ai-bot]

Comment by le717
Monday Mar 09, 2015 at 22:05 GMT

---

I was actually going to do this as part of #8985, but it's probably better to submit it separately so it doesn't take as long to merge. :)

[core-ai-bot]

Comment by peterflynn
Tuesday Mar 17, 2015 at 05:53 GMT

---

Sigh... shame there are all those separate references in core extensions.

@humphd I think for now you'll have to live with just having more diffs in your fork than you'd like... unless you feel like biting off the work of getting extensions' LESS to compile in the context of the Brackets core LESS (or at least with a variable declarations file that's shared between them). That would significantly simplify the dark/light theming too, so it's definitely worth doing... but it's also a lot more work than just adding a dozen extra 1-line diffs on your end :-)

The code changes here look ok to me though. Just one thought: what about the .code-font() mixin defined in brackets_theme_default.less? For completeness we should probably add a @sourceFontFamily-medium variable too, even though there's only that one reference for now.

[core-ai-bot]

Comment by peterflynn
Tuesday Mar 17, 2015 at 06:05 GMT

---

(Link: the card RESEARCH: Theming improvements & maintainability discusses shared LESS vars briefly, but it covers a lot of other ground too)

[core-ai-bot]

Comment by humphd
Tuesday Mar 17, 2015 at 15:37 GMT

---

@peterflynn thanks for reviewing. I agree that it's not worth shaving the "extensions' LESS" yak just to do this change. I'll do another commit for the .code-font() mixin later today or tomorrow, and this should be good to go.

[core-ai-bot]

Comment by humphd
Tuesday Mar 17, 2015 at 17:33 GMT

---

@peterflynn: Updated, ready for another look.

[core-ai-bot]

Comment by peterflynn
Tuesday Mar 17, 2015 at 20:51 GMT

---

Looks good.

[core-ai-bot]

Comment by humphd
Wednesday Mar 18, 2015 at 02:08 GMT

---

Awesome, thanks for the help with this, and for landing it so quickly.

[core-ai-bot]

Comment by humphd
Wednesday Mar 18, 2015 at 16:08 GMT

---

FYI, doing follow-up work with this on our branch, I found one more use of SoureCodePro-Medium, but it's in JS here https://github.com/adobe/brackets/blob/master/src/view/ViewCommandHandlers.js#L94. I don't think there's a nice way to include that one in what we did above, so I've just changed it manually in our fork.

[core-ai-bot]

Comment by Pomax
Wednesday Mar 18, 2015 at 19:00 GMT

---

Oh that's an interesting rule, too: it relies on two windows-specific fonts (which used to require installing asian languages, but I don't think that's true anymore?) without rules for what to load on OSX and Linux