Feature Request: Opsions to define `sans-serif` and `monospace` fonts

[Phroneris]

Description

I wish for sans-serif and monospace font family options and hope their values are inserted just before the sans-serif's and the monospace's of the CSS.

Namely for now:

.github-markdown-body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial,
    /* HERE, */
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

.github-markdown-body :is(code, kbd, pre, samp) {
  font-family: /* HERE, */ monospace;
}

.github-markdown-body :is(tt, code, samp, pre) {
  font-family:
    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono",
    /* HERE, */
    monospace;
}

and maybe:

.github-markdown-body .footnotes .data-footnote-backref g-emoji {
  font-family: /* HERE, */ monospace;
}

Pitch

The default fonts of operation systems and browsers are not always satisfactory for users, so most browsers have the ability to register the user's preferred font for the serif, sans-serif, and monospace fallback.

For example: I am a Japanese speaker, so I have my favorite Japanese font set differently than the default in Chrome. This allows me to read sources and previews with Japanese characters on GitHub, a latin-character-based website, with some comfort due to the fallback.

Now let's see https://github.com/mjbvz/vscode-github-markdown-preview-style/issues/105#issuecomment-1547988644

The goal of this plugin is to match Github's rendering as close as possible

Okay, it makes sense that the fonts should not be freely configurable for the purpose of reproducing the display of GitHub. Then, since GitHub is a website that is displayed in a browser, shouldn't it be possible to reproduce the browser's font fallback as well?

Method

One possibility is to use markdown.preview.fontFamily as the sans-serif and editor.fontFamily as the monospace, but users may not always want to use those fonts for GitHub previews.

So, it would be nice to create two new options for that font families, use the above values as fallback, and indicate that in the description of the options:

{
  // ...
  "markdown-preview-github-styles.someNiceOptionName1": { // sans-serif
    "someNiceDescription": "Used as `sans-serif`. When blank, `markdown.preview.fontFamily` is used.",
    "default": "sans-serif",
    // ...
  },
  "markdown-preview-github-styles.someNiceOptionName2": { // monospace
    "someNiceDescription": "Used as `monospace`. When blank, `editor.fontFamily` is used.",
    "default": "monospace",
    // ...
  },
}

Of course, it would also be nice as a safer way to not have anything inserted when the option is left blank.

Thanks.

[mjbvz]

You can specific custom css using the markdown.styles setting (this setting is a list if paths to custom custom stylesheets that should be loaded into the preview). This should let you override styling defaults, such as the font

[Phroneris]

Yes we can use the setting, but it's only with inward relative paths, for local stylesheets.

https://github.com/Microsoft/vscode/issues/45260#issuecomment-371428889

Root cause: We now restrict the markdown preview to only loading resources inside the current workspace for security reasons.

...Oh, this is your comment. Thanks. Anyway, while I am very sorry to say, this inconvenience sucks. While it's one of the causes I opened this issue, I forgot to mention that.

And, even if some stylesheet is referenced effectively, another problem is that there is no way to override reserved font family keywords in CSS to emulate that browser fallback. I mean this doesn't have any effect:

@font-face {
  font-family: sans-serif;
  src: local("My favorite font name");
}

due to the CSS specification:

https://github.com/w3c/csswg-drafts/issues/4580

Of cause, workaround is to write .github-markdown-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, "My favorite font name", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; } thing, but it isn't very generic. I'm already doing this via https, but........................ this inconvenience sucks. And since this behavior also seems doubtful in terms of the goals of this extension, I made this issue.

FYI, the trigger for my noticing this problem is this terrible pixel font, MS Gothic, that VS Code uses by default for monospace Japanese characters in the preview.

Windows 10 64-bit Home 22H2, VS Code 1.80.2, in Japan/Japanese.