Html code before list results in unaligned list in reading view

That’s to be expected. Markdown won’t render properly inside of HTML tags. Seems ordered lists don’t render in Live Preview or Reading views.

See →

And a related recent post:

The <font> tag is depreciated and you should avoid it. If you need to style only those three sections in the note, I’d consider using a span class for each and the corresponding CSS.

1. <span class="arial"> Cthulhu is a cosmic entity created by writer H. P. Lovecraft. </span>
2. <span class="arial"> It was first introduced in his short story "The Call of Cthulhu", published by the American pulp magazine Weird Tales in 1928. </span>
3. <span class="arial"> Considered a Great Old One within the pantheon of Lovecraftian cosmic entities... </span>

and the CSS:

.arial {
  font-family: 'Arial';