vscode: Unable to change the font of Markdown cells of Jupyter notebook.

@Photonico I also wanted to change to a preferred font while reading a long notebook and decided to dig around a little. While waiting for an official solution for this, I found that running the following snippet (with your chosen font) in a code cell anywhere in the notebook will only affect markdown cell outputs. I’ve attached a screen-grab below.

%%HTML
<style>
    body {
        --vscode-font-family: "ComicSansMS"
    }
</style>

Simply delete the cell containing the snippet to revert the changes.

@Phlogist I’m using the %%html magic command that should be builtin to IPython. I simply include the code I provided above into one of the code cell in the .ipynb that is open in VSCode and run the code. If it’s still not working, it could be that the css variable name is different. I’ll outline how I figured it out. I’m using macOS but it shouldn’t be too different from Windows.

---

Open an ipynb file on VSCode that contains markdown. On the VSCode toolbar, select Help >> Toggle Developer Tools You’ll see the Developer Tools popup. On the top left of the window, there should be an icon (arrow on top of a square) that looks like so: Click on that icon then click on any rendered markdown text. That will select the HTML element that contains that particular text. In my case, I selected “Markdown test.”.

You’ll see changes in the Developer Tools window. Scroll down the Style window and search for the body tag. From that tag, note down what the variable is for the font-family: For me, it’s --vscode-font-family. Now you can inject an HTML style change in that notebook by adding the following code into a code cell in the notebook and running it (change to your font of choice, of course).

%%html
<style>
    body {
        /* change --vscode-font-family if it's different on your system */
        --vscode-font-family: "Wingdings"
    }
</style>

This can now be customzied by markdown.preview.lineHeight

Hi,

This function cannot customize the font family in Jupyter Markdown Cell. I want to change it to a serif font, for example, Times New Roman.

Sincerely,

@kadri-nizam By the way, I think this might explain why changing notebook>output: Font Family in the settings is not working. Maybe because the programmer called another html parameter by mistake when writing the Markdown renderer in Jupyter. I sincerely hope that the programmers at Microsoft would see this and solve this trivial problem as soon as possible. After all, it’s been on the back burner for a long time.

This can now be customzied by markdown.preview.lineHeight

Reopening based on comments in #161103

looks like the font itself still can’t be customized

@kadri-nizam Thanks a lot. I followed your guide and finally found that the magic command in Windows is %%HTML instead of %%html.

Hi,

Does this problem get some any measures? I am looking forward to it very much.

Sincerely, Lu