[VSCode] - How to switch between regular and italic (cursive) font family?

shivapoudel commented 3 years ago

Cascadia family version

2105.24

Cascadia family variant(s)

Cascadia Code (the version with ligatures)

Font file format(s)

.ttf (variable)

Platform

Windows 10

Other Software

Visual Studio Code

What happened?

Why installing both CascadiaCode.ttf and CascadiaCodeItalic.ttf cause default to the CascadiaCode font family in VSCode? Sometimes I prefer italic variants sometimes regular, how can we switch between via VSCode settings.json?

Vincent-HD commented 3 years ago

I'm searching how to do it too, this is annoying, but I think it isn't related to the font, the only way I can use Italic is to install only Italic, but as soon as I installed the Windows Terminal, it install all others Cascadia Code font, and I can't get it to work, I must uninstall Windows Terminal

Nor vscode, Windows Terminal or Terminus (terminal program) work when all fonts are installed

patrickfatrick commented 3 years ago

If I'm understanding the issue I believe this will be fixed when they release the next version. Currently there's a naming issue such that the italic and the regular variants are not recognized as the same font. See #503

aaronbell commented 3 years ago

Hi! Sorry for the delay in getting back to you. Please try the new release and let me know if it resolves your issues. Thanks!

https://github.com/microsoft/cascadia-code/releases/tag/v2106.17

IllusionMH commented 3 years ago

VS Code doesn't have single switch to italics, however you can update editor.tokenColorCustomizations to force italics across all scopes which effectively would show everything in italics. See https://github.com/microsoft/vscode/issues/126370#issuecomment-861607534

aaronbell commented 3 years ago

The way I use it is:

    "editor.tokenColorCustomizations": {
        "comments": {"fontStyle": "italic"}
    },

That way all comments are set to be italics.

scriptingstudio commented 3 years ago

"comments": {"fontStyle": "italic"} does NOT work :-((

IllusionMH commented 3 years ago

It works, but you need to make sure that you have proper version (with italics) added first to editor.fontFamily and paste full snippet from @aaronbell Alternatively - you should use textMateRules.

scriptingstudio commented 3 years ago

I have installed the latest version of the font by the installation instruction. Nothing helped.

aaronbell commented 3 years ago

It appears that the italic is rendering correctly?

Though I note that it also looks like you're seeing the cursive forms. Did you activate ss01, or is that how they're showing by default? It may be that you're having an issue with the old versions being present and may need to clear font cache / reinstall.

scriptingstudio commented 3 years ago

I reinstalled fonts and cleared the cache. No changes. How to check for the old versions? This is my config:

"editor.fontSize": 20,
    "editor.minimap.showSlider": "always",
    "editor.wordWrap": "on",
    "powershell.scriptAnalysis.enable": false,
    "powershell.codeFormatting.newLineAfterOpenBrace": false,
    "powershell.codeFormatting.preset": "Stroustrup",
    "editor.insertSpaces": false,
    "powershell.codeFormatting.newLineAfterCloseBrace": false,
    "powershell.codeFormatting.whitespaceAfterSeparator": false,
    "powershell.codeFormatting.WhitespaceAroundPipe": false,
    "powershell.codeFormatting.WhitespaceInsideBrace": false,
    "powershell.integratedConsole.showOnStartup": false,
    "editor.fontFamily": "'Cascadia Mono', Consolas, 'Fira Code', 'Input Mono',  'Courier New', monospace",
    "editor.autoClosingQuotes": "never",
    "editor.autoClosingBrackets": "never",
    "editor.smoothScrolling": true,
    "editor.fontLigatures": false,
    "files.autoGuessEncoding": true,
    "files.encoding": "utf8bom",
    "search.enableSearchEditorPreview": true,
    "search.maintainFileSearchCache": true,
    "search.showLineNumbers": true,
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.cwd": "C:\\Users\\sm\\Documents\\Documents\\sysadmin",
    "terminal.integrated.fontSize": 17,
    "terminal.integrated.rendererType": "experimentalWebgl",

    "workbench.colorCustomizations" : {
      "terminal.foreground" : "#39CCCC",
      "terminal.background" : "#001f3f"
    },
    "editor.renderWhitespace": "none",
    "powershell.powerShellDefaultVersion": "Windows PowerShell (x64)",
    "workbench.colorTheme": "Zenburn (No Bold)",
    "extensions.ignoreRecommendations": false,
    "editor.codeLens": false,
    //"terminal.integrated.shell.windows": "",
    "currentFilePath.defaultPathStyle": "windows",
    "debug.saveBeforeStart": "nonUntitledEditorsInActiveGroup",
    //"editor.tokenColorCustomizations": {
    //  "comments": {"fontStyle": ""},
    //  "textMateRules": [{
    //    "scope": ["comment", "constant", "emphasis"],
    //    "settings": {"fontStyle": ""}
    //  }]
    //},
    "security.workspace.trust.untrustedFiles": "open"

shivapoudel commented 3 years ago

@aaronbell Well, I don't think an update is related to this issue fix which I have thought of earlier, although it has other changes. I have installed both default and italic versions of fonts so using rules how can I get terminal scopes in italic. VSCode settings is like this:

    "editor.fontSize": 11,
    "editor.fontFamily": "'Cascadia Code', Consolas, 'Courier New', monospace",
    "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'",
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                    "comment",
                    "constant",
                    "emphasis",
                    "entity",
                    "invalid",
                    "keyword",
                    "markup",
                    "meta",
                    "storage",
                    "string",
                    "strong",
                    "support",
                    "variable"
                ],
                "settings": {
                    "fontStyle": "italic"
                }
            }
        ]
    },

aaronbell commented 3 years ago

@scriptingstudio it looks like you’ve commented out all of the code that would activate the italic version. But I’m a bit confused because the image sample you showed previously was displaying an italic.

@shivapoudel there was an issue previously where the static instances had a name table instance that could cause them not to link properly. I figured that might be the reason for the issue you were having. Glad it is working for you now!

shivapoudel commented 3 years ago

@aaronbell I wanted the VSCode terminal to also be italic but it is not happening?

scriptingstudio commented 3 years ago

@aaronbell I played with different configs and could not get the italic work. I removed the font from my system but VScode displays Cascadia anyway. There seems to be another font location.

aaronbell commented 3 years ago

Oh! That's because the settings you are using are related to the editor. You want to modify the settings for the terminal.integrated. I'm not super familiar with terminal customization (@IllusionMH seems to know it backwards and forwards :) ), but where are you looking to use the italics in terminal?

scriptingstudio commented 3 years ago

I want to see the italic in vscode

shivapoudel commented 3 years ago

@aaronbell overall in the integrated terminal which is displayed correctly when we uninstall the default Cascadia code font.

aaronbell commented 3 years ago

@shivapoudel I tried using the setting: "terminal.integrated.fontFamily": "\"Cascadia Code Italic\"",

However, VS Code refused to allow the Italic style to be used in the Terminal. Out of interest, I also tried Fantasque Sans Mono, but that also failed. This leads me to believe that the issue is external to Cascadia Code and is a VSCode Issue. @IllusionMH, do you know anything about this?

@scriptingstudio I'm really sorry that you're struggling. With regard to the font still showing up, Windows Terminal installs a version of Cascadia Code / Cascadia Mono, which may be what you're seeing, but that shouldn't impact VS Code as any font installed on the system should override. Can you try the process here: https://github.com/microsoft/cascadia-code/wiki/Double-installation-issue

For reference, here's my VS Code settings:

{
    "git.autofetch": true,
    "team.showWelcomeMessage": false,
    "editor.fontFamily": "'Cascadia Code', Menlo, Monaco, 'Courier New', monospace",
    "window.zoomLevel": 0,
    "editor.fontWeight": "400",
    "terminal.integrated.fontWeight": "300",
    "terminal.integrated.fontWeightBold": "500",
    "python.languageServer": "Pylance",
    "team.showFarewellMessage": false,
    "editor.wordWrap": "on",
    "editor.fontLigatures": true,
    "editor.tokenColorCustomizations": {
        "comments": {"fontStyle": "italic"}
    },
    "[python]": {

        "editor.wordBasedSuggestions": false
    },
}

aaronbell commented 3 years ago

Interesting. I found this comment (https://github.com/microsoft/vscode/issues/105672#issuecomment-686055516)

It is possible that the terminal renders things differently than the editor. xterm.js uses custom rendering, where they sample glyphs and create GPU textures / atlases and then render the terminal. This mostly works because of some monospace assumptions. The editor on the other hand delegates everything to Chromium.

That might explain why I was having issues :). It appears that xterm.js does have support for italic forms:

(code found here https://github.com/xtermjs/xterm.js/pull/1422)

However, how to set the entire terminal to use the italic mode is, unfortunately, beyond my knowledge of this stuff and I haven't been able to find any guides. Hope this is helpful!

Tyriar commented 3 years ago

That might explain why I was having issues :). It appears that xterm.js does have support for italic forms:

You cannot set the whole terminal to italic. I guess if you really wanted this you could hack the font to create an italic only family version of it, I don't think it's worth adding a setting to allow this as it's very niche and ends up breaking \x1b[3m

IllusionMH commented 3 years ago

Sorry that was night time and no electricity in the morning.

There is pretty limited workaround where you can leave no choice VS Code integrated terminal but to use italics version of font: use different versions of font bot editor and terminal - for example use font with ligatures for editor and without them for terminal. At least verified on Windows.

For editor - install CascadiaCodePL.ttf and CascadiaCodePLItalic.ttf, set "editor.fontFamily": "'Cascadia Code PL'" For terminal - install only CascadiaMonoPLItalic.ttf and use "terminal.integrated.fontFamily": "'Cascadia Mono PL'" Obviously normal and italics styles would render identically with this approach.

So basically you need font with separate name that has italic only characters.

I tried using the setting: "terminal.integrated.fontFamily": "\"Cascadia Code Italic\"",

I'm not expert in fonts, however I don't think that installing any of fonts from releases (at least .ttf files) will register front with that name so terminal would fallback to defaults. Without flag that would force terminal to use italic characters from font that has regular character (as commit linked earlier does for escape sequences) I think it's impossible to do that unless you have font with separate name and italic only characters.

On Windows both regular and italic versions have same name and are merged, so regular will be used in terminal.

scriptingstudio commented 3 years ago

Newest production version (1.9.1942.0) of terminal fixed my problem.

SeanMarkWD commented 1 week ago

I have installed the latest version of the font by the installation instruction. Nothing helped.

This one worked for me, but what really worked for me was, since I'm using MacOS, was to download this latest update -, then note the file extension. It's ttf. So you have install this somehow, so I researched what's a ttf. You can install these with Apple Font Book. As soon as you figure out how to install the files (they have to be readable by VScode somehow and VScode does not yet know how to find the files) then you're in business. Hope this was useful to you.

microsoft / cascadia-code