html inline style not applying in Jupyter notebook cells anymore

Issue

When passing style argument along with a <span> starting block, I changed font-size and font-family and all of that in my Jupyter notebook's individual cells. Like so-

<span style="font-family:Verdana">Irrelavant text.</span>

OR

# Model Building                        <span style="font-size:12px">[Jump to Beginning](#top)</span>

It was working just fine until about a week or so ago, when all of the style effects in my notebook just disappeared. The code is obviously still there in the markdown cells but it just doesn't show the intended result. The same notebook still works and loads the style when ran on Kaggle or JupyterLab. Did Jupyter notebooks stop supporting it or did I change something unintentionally? What could be a workaround or maybe even a fix for the issue without changing the code?

It used to look like this (avoid the black theme, screenshot is from JupyterLab)-

And now it looks like this-

As you can see, the font-size:12px has no effect anymore. Same goes for font-family and the likes.

Edit: Notebook

Solution

I don't think this is the answer you wanted, but it works. It is scalable, too. I usually use Python with Atom, XCode, or RMarkdown in RStudio, so I am not all that familiar with the ins and outs of Jupyter's interface.

First, I noticed that I could see the text rendered as expected when I went to print preview. However, I thought that that was pretty useless. What are you going to do? Go to print preview every time you write something? What's the purpose of an interactive notebook at that point?

I digress.

Okay, so what I found that worked... in no way is this an idea that is originally mine...

Custom CSS

Adding a custom CSS file, but not the 'change it all' thing that the Jupyter help files suggest...

Step 1) Create a styles folder in the same directory as the ipynb file.

Step 2) Within the styles folder, create a CSS file.

Step 3) Within that CSS file, write the two tag styles and any others you desire.

Here's that code (pictures of code are annoying).

div.verdana {    
    font-family:verdana;
}

div.bigger {
    font-size: 20pt;
}

Within the ipynb File

Step 4) Next, add the div tags to your ipynb file in a Markdown cell:

<div class='verdana'>This should be Verdana font.</div>

The result after running the cell:

Step 5) Do the same thing with the bigger font. You highlighted the desire for font-size:20px; I inadvertently did font-size:20pt. Just change the pt to px.

Add the div tags to your ipynb file in a Markdown cell:

<div class="bigger">Font size 20px</div>

The result after running the cell:

Step 6) Somewhere in the notebook, you need to call the link to the CSS file. I just added it to the end:

from IPython.core.display import HTML
def css_styling():
    styles = open("./styles/custom.css", "r").read()
    return HTML(styles)
css_styling()

It can go at the end because the entire kernel executes initially (so it doesn't need to be before you call the tags.

FYI I did try to use magic, but it did not work for the font-family:

%%html
<style>
// add your CSS styling here
div.verdana {    
    font-family:verdana;
}

div.bigger {
    font-size: 20pt;
}
</style>

Answered By - Kat