Notebook: Possible with different font settings for editing code and markdown cells in the Jupyter Notebook?

[joelostblom]

In the Jupyter notebook, I would like to use the regular Ubuntu font when editing markdown cells and UbuntuMono for code cells. I can change the fonts of both these cell types simultaneously by editing .jupyter/custom/custom.css like so:

.CodeMirror pre {
    font-family: "Ubuntu Mono", monospace;
    font-size: 14pt;
}

I can also change the formatting of the headers in the markdown code cells:

.cm-header {
    font-size: 110%;
    font-family: "Ubuntu";
}

As well as how the text looks when rendered (after executing a markdown cell):

div.text_cell_render {
    font-family: "Ubuntu";
    font-size: 12pt;
}

However, I don't understand which css classes I could use to discriminate between code cells and paragragh/body text in markdown cells in edit mode. I tried the object inspector in Firefox, but the input text for both cell types show up with the same span tags and css classes. I have tried many of the combinations listed here, but it seems like I just can't find the right one.

Is it possible to achieve what I am trying to do? If so, how would I go about it?

[takluyver]

I'd guess something like .text_cell .CodeMirror pre, but I'm not an expert on composing CSS selectors.

[joelostblom]

Oh, I didn't realize it is possible to combine CSS selectors like that. This works great, thank you @takluyver !

.text_cell .CodeMirror pre {
    font-family: "Ubuntu";
    font-size: 12pt;
}

[nfnxmc]

I just used @joelostblom hint for custom.css and override some css rules. Magic! Thanks @joelostblom

[BakrFrag]

either in the .ipython folder or .jupyter folder i don't found custom folder of even custom.css file
@joelostblom
i use ipython version 7.2.0

[joelostblom]

@BakrFrag You likely need to create a default configuration with jupyter notebook --generate-config.

[BakrFrag]

@joelostblom thanks for your help

i see all options i don't fount any option related to font-size

[joelostblom]

You can add it yourself like I did above.