How can I use both the oblique and italic styles of Victor Mono in VS Code?

user_1455970 0
Viewed 3814

The Victor Mono font family supplies distinct oblique and italics font faces. I would like to use Italics for the comment.block.documentation scope, and Oblique for other comment scopes. However, the obvious settings.json section:

    "editor.tokenColorCustomizations": {
        "textMateRules": [
        {
          "name": "Documentation",
          "scope": "comment.block.documentation",
          "settings": { "fontStyle": "italic" }
        },
        {
          "name": "Comment",
          "scope": "comment",
          "settings": { "fontStyle": "oblique" }
        },
      ]
    }

does not work, because the rendering engine seems to interpret "oblique" and "italics" as "whichever of oblique or italics is provided in the last font file to be loaded that provides either.

vscode-settings visual-studio-code
1 Answers

I adapted a previously published approach for supporting multiple fonts in VS Code, and then transformed the problem statement to that form. The solution uses two "font families": one named "Victor Mono Medium" and being the "real" font family, providing normal and italic styles and an inaccessible oblique style; and one named "Victor Mono Medium Oblique", providing normal and oblique styles only, and only used for the oblique style.

As a simplification, I chose to sacrifice the ability to use an underlined font style. This is acceptable for my use case, and simplifies the solution significantly. The approach is then:

  1. Using the standard tokenColorCustomizations mechanism, use fontStyle: "italic" where italics are desired, and fontStyle: "underline" where oblique is desired.
  2. Using the "Enable Custom CSS and JS" extension, provide a custom CSS file.
  3. In the custom CSS file, create a @font-face that has oblique but not italic styles.
  4. In the custom CSS file, change the styling for fontStyle: "underline" to use the oblique font face, obliquely, and not underline.

After installing "Enable Custom CSS and JS" and following its instructions to enable use of a custom CSS file, and copying the VictorMono-MediumOblique.otf font file to a chosen location, here's the relevant contents of my settings.json:

...
    "editor.fontLigatures": true,
    "editor.fontFamily": "'Victor Mono Medium'",
    "vscode_custom_css.imports": ["file:///MYPATH/.vscode/style.css"],
    "vscode_custom_css.policy": true,
    "editor.tokenColorCustomizations": {
        "textMateRules": [
        {
          "name": "Documentation",
          "scope": "comment.block.documentation",
          "settings": { "fontStyle": "italic" }
        },
        {
          "name": "Comment",
          "scope": "comment",
          "settings": { "fontStyle": "underline" }
        },
      ]
    },
...

and my style.css:

/* Replace underline with oblique */
@font-face {
    font-family: 'Victor Mono Medium Oblique';
    src: url('file:///MYPATH/VictorMono-MediumOblique.otf');
}
.mtku {  
    font-family: 'Victor Mono Medium Oblique';
    font-style: oblique;
    text-decoration: none;
}
user_14559700
Related