# Changing fonts in mark down cells.

Is there a way to change the fonts in markdown cells. For instance to use computer modern fonts.

edit retag close merge delete

Hello, @Cyrille! Could you send an example with a markdown cell? I don't know markdown, but having an example, I could experiment in order to obtain a solution.

( 2020-04-30 22:39:55 -0600 )edit

For instance I use %%html <style> body { font-family: "Palatino Linotype", cursive, sans-serif; background-color: rgb(252,251,251); } .prompt { font-family: "Palatino Linotype", cursive, sans-serif; font-size: 15px; min-width: 6em; } .input-prompt { color: rgb(108, 119, 188); } .output-prompt { color: rgb(20, 129, 106); } code, kbd, pre, samp, .CodeMirror { font-family: "Palatino Linotype", cursive, sans-serif; font-size: 15px; }

In the first cell, it's nice but I have noticed that I lost mathjax since $\int_a^b \sin(x)dx$ is displayed literally

</style>

( 2020-05-01 12:04:16 -0600 )edit

take a look here, probably it is the answer that you wants, however Im not sure if it would work for sage under windows, try it

( 2020-05-02 12:36:44 -0600 )edit

Sort by » oldest newest most voted

Hello, @Cyrille! I am not completely sure that I understood what you intend to do, but I hope this solves your problem. I am using the configurations you wrote in your comment.

First, put the following in a Jupyter cell:

html("""
<style>
body { font-family: "Palatino Linotype", cursive, sans-serif; background-color: rgb(252,251,251); }
.prompt { font-family: "Palatino Linotype", cursive, sans-serif; font-size: 15px; min-width: 6em; }
.input-prompt { color: rgb(108, 119, 188); }
.output-prompt { color: rgb(20, 129, 106); }
code, kbd, pre, samp, .CodeMirror { font-family: "Palatino Linotype", cursive, sans-serif; font-size: 15px; }
</style>""")


The first line indicates that this cell will execute html code. Then, the second line is the code from your comment, but you should have the Palatino Linotype fonts installed on your computer. This should change all the fonts.

Many parts of the Jupyter notebook have different styles, which will overwrite your font settings. For example, the code html tag uses monospace fonts; that is why you should change some tags and classes settings also. (I suspect you are using this complicated style because you inspected the tags and classes of the Jupyter notebook. As far as I can see, these are all the configurations you will require; but if you were to need to change the font for something else, I assume you will be able to discover the corresponding tag or class.) Another important comment is that you could the body tag with *---personally, I can't see the difference, but it is my understanding that* is more general.

After this, you can write something like

%%latex
The formula
$$\int_a^b\sin(x)\;dx=-\cos(b)+\cos(a)$$
is completely correct.


as your second cell, and you will notice that the font is consistent. (This should solve the problem with MathJax you mentioned in your comment.) Since the Jupyter notebooks are html, you can inspect the code with the developer tools of your web browser (for example, pressing <f12> in Firefox) to verify that the correct font has been used.

Sage code cells do not require any special magic comments; just write what you need to execute:

integrate(x^2, x)


That being said, if you share your Jupyter notebook with somebody that doesn't have the fonts you used intalled on their system, the web browser will use some default font. You can prevent this from happening by using a web font service like Google Fonts. For instance, here I am importing a font and using it for the complete notebook:

html("""
<style>
body { font-family: "Roboto Slab", serif; background-color: rgb(252,251,251); }
.prompt { font-family: "Roboto Slab", serif; font-size: 15px; min-width: 6em; }
.input-prompt { color: rgb(108, 119, 188); }
.output-prompt { color: rgb(20, 129, 106); }
code, kbd, pre, samp, .CodeMirror { font-family: "Roboto Slab", serif; font-size: 15px; }
</style>""")


You can also download the fonts you require, put the in a folder called, for example, "fonts" and share it together with your notebook. In that case, you should write something like

html("""
<style>
@font-face { font-family: "Roboto Slab"; src: url("fonts/RobotoSlab-VariableFont_wght.ttf"); }
body { font-family: "Roboto Slab", serif; background-color: rgb(252,251,251); }
.prompt { font-family: "Roboto Slab", serif; font-size: 15px; min-width: 6em; }
input-prompt { color: rgb(108, 119, 188); }
output-prompt { color: rgb(20, 129, 106); }
code, kbd, pre, samp, .CodeMirror { font-family: "Roboto Slab", serif; font-size: 15px; }
</style>""")


I should point out that not all the fonts obey the cursive or the sans-serif settings (for example, "Roboto Slab"). However, remember that normal text should be written in roman font, while math should be written in cursive. I don't recommend using cursive for the complete notebook.

If you prefer, instead of using Sage's html function, you can use IPython's HTML function. You should write the following in some cell before using it:

from IPython.display import HTML


I hope this helps!

more

Of course this help. Now is there a way to hide this cell with a button ?

( 2020-05-02 05:33:41 -0600 )edit

@Cyrille about the button you can try something like this. If Im not wrong you can use python code inside sagemath cells, so it could work

( 2020-05-02 12:47:26 -0600 )edit

Hello, @Cyrille! Please, see my answer to this question. It is a partial solution, but I think it will be helpful.

( 2020-05-02 14:08:48 -0600 )edit

According to https://jupyter-notebook.readthedocs.... markdown is a superset of HTML. Since you can change fonts in HTML, it would follow that you can change fonts in markdown cells too. I suspect it's going to be quite painful to do, and would result in worksheets that don't fare very well under other export methods.

In fact, one of the best ways to get things in Computer Modern would be by exporting your sheet to LaTeX (and probably to PDF from there)

more