Several fonts at the same time for different elements of the code

[danielmunoz]

Please create a way to give themes and/or users the possibility of using several fonts at the same time. Please check this article that describes how this is possible to achieve on the Atom editor.

https://medium.com/@peterpme/operator-mono-fira-code-the-best-of-both-worlds-191be512fd5e

In this example, this allows the user the define one font for certain elements in the code, while using another fonts as the main one for the rest of the code.

If Operator Mono and Fira Code spent a lot of time together and had a baby, you’d get something that looks like this.

[OneOfOne]

Nice feature request but dear god that's ugly...

[bcherny]

Another use case: It's much easier to author Markdown files if the main text uses a Serif font, but that means fenced code blocks also show up in Serif. The ability to have text in Serif and code blocks in Monospace would make authoring Markdown a really nice experience.

[ariesshrimp]

this is the thing that i miss most from using Atom. with access to the editor stylesheet i could target operator symbols with fira to get ligatures, and have everything else in operator.

[thundernixon]

Just adding that I too would love to use this for editing markdown, or for using a specific variation of a font for certain keywords (e.g. Operator Italic for words like "const" while I use something else for general code). I would just use Atom, but I like VS Code too much to switch.

[jcklpe]

I would like official support for this. Though I've seen people get a hack around it. Not quite sure how to do it though. Trying to figure that out. They're using custom CSS extension though.

[ghost]

Also related: https://github.com/Microsoft/vscode/issues/30925

Would love for this to be supported. Having to rely on extension hacks really sucks.

[jcklpe]

@nealot check out the ligaturizer github repo. It's a python script that allows you to add fira code ligatures to any font you want.

Also 8 figured out how to do the custom css thing and it's not hard but all the tutorials on it are way too focused on aping a specific function of a pricy coding font instead of actually giving you just the basic gist. Also really misses the scope of all the things possible with the ability to change fonts. I've got 4 different fonts being used for different aspects of different languages. It's dope!

[TheSETJ]

It will be nice if we have this feature, especially with current tokenColorCustomizations setting, if we could specify font family too, it'll be great.

[jcklpe]

I'll soon be writing an article on my website talking about my vscode set up and how I implemented multiple font families using the extension hack. Maybe this gives an example of how it can be used in a way that's not super clashy (though I still have some kinks to iron out too)

I'm using a Input Sans (a proportional programming font) for code, Fira Code with Nerd powerline additions (a mono font with ligatures) for the terminal, Aller (a clean paragraph proportional font) for single line comments, and Fira Code for block commenting (second picture, it's to make sure ASCII titles stay properly aligned)

It would be A LOT EASIER if we could just edit elements of the program using stable class names like in Atom, though I understand that Vscode names it's elements programmatically. Still! would be nice.

[TheSETJ]

The problem with class names using Custom CSS and JS Loader and extension hacks is that classes are based on styles (it's normal because it's about style sheets) and if various elements on a theme have the same style (for example operators and keywords in my theme are the same color and font style), they have the same class. If you want them to be different you should use tokenColorCustomizations to make a difference between them so they get different classes. It would be easier to do other customization on the look of an element using tokenColorCustomizations.

[jcklpe]

Yes espc because of the way that vscode is built. It's my understanding that Atom doesn't have that issue and that it uses CSS class names but I could also be wrong. I know that when I asked about the naming scheme for css class names in vscode I was told they are subject to constant change and are generated programatically at run time or something of the sort. Which at least from my observation seems to be true.

On Thu, Sep 6, 2018 at 8:48 PM Sayyed Ehsan Taheri Javid < notifications@github.com> wrote:

The problem with class names using Custom CSS and JS Loader and extension hacks is that classes are based on styles (it's normal because it's about style sheets) and if various elements on a theme have the same style (for example operators and keywords in my theme are the same color and font style), they have the same class. If you want them to be different you should use tokenColorCustomizations to make a difference between them so they get different classes. It would be easier to do other customization on the look of an element using tokenColorCustomizations.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Microsoft/vscode/issues/23707#issuecomment-419294442, or mute the thread https://github.com/notifications/unsubscribe-auth/AJA4zgtmHodL8t93To5MWQbzde8n12Vmks5uYdBWgaJpZM4MvCX_ .

[TheSETJ]

I confirm that. The behaviour as far as I've seen is as follows: Whenever you change your theme many of the classes regenerate and if you add a rule to the tokenColorCustomization, a new mtkX class is generated (which X is a number). If you have styles for mtkY classes which Y > X, you should find those Ys again and modify your CSS, for classes which Y < X, they stay the same.

[TheSETJ]

I want to know, can we expect this feature in any future version? I see that this issue is added in backlog, but @alexandrudima removed their assignment and this issue is assigned to no one now.

[jcklpe]

Yes, I would also be interested in hearing. I'm also having an issue with my custom font in comments as can be seen in this issue here: https://github.com/Microsoft/vscode/issues/59587

Here's the thing to me. Maybe the hypothetical MS dev who sees this message doesn't PERSONALLY want to be able to tweak their theme to use different fonts in different contexts.... but there's a lot of people who do, and they're going to do it whether you think it's "proper" or not. So it's better to support that behavior with an official token than for them to using these hacky temporary solutions etc.

[mikemaccana]

A few common use cases:

• Emphasizing interesting / unusual / large structures. Eg, a function assignment is more complex than a string assignment.
• Having code in a monospace font, but prose (like comments) in a regular font
• Focusing on code rather than comments (or vice versa) by controlling font weight
• Making constants 'pop' (more than just regular uppercase does)

[borekb]

For Markdown, Caret does this beautifully:

Light:

Dark:

I wish this was possible in VSCode.

[jcklpe]

@borekb it kind of is with a hack using CSS injection as I mentioned. If you'd like to see how I did it, I have a post [here]

Warning the extension I originally made does not actually work in solving this problem because I packaged the extension wrong (or something... not sure... I used MS's azure based extension build tool and the documentation for it seems outdated so maybe that's just broken).

I'm going to do a proper rebuild of the project soon but for now, the blog post and the code in the git-repo for the project should give you a basic idea of how this issue can be solved.

[dziku86]

@jcklpe Hi, could you re-post this post on your blog?

[jcklpe]

@dziku86 Yeah sorry about that. The code for the project has a copy of that post in it's readme: https://github.com/jcklpe/vscode-enzo

[dziku86]

@dziku86 Yeah sorry about that. The code for the project has a copy of that post in it's readme: https://github.com/jcklpe/vscode-enzo

Thank you!