quillngx-quill

Quilljs not using font elements


I have the following HTML:

<p style=""><span style="font-family: Arial;"><font style=""><span style="font-size: 16px; color: rgb(255, 0, 0);">This is red 3.</span>&nbsp; <strong style=""><span style="color: rgb(0, 176, 80);"><font size="7">And this is green 7</font></span></strong>.</font></span></p>\r\n<p style=""><span style="font-family: Arial;"><font style="" size="5"><strong style="">This is bolded 5</strong></font></span></p>\r\n<p style=""><span style="font-family: Arial;"><font style="" size="5"><strong style="font-size: 16px; color: blue;">BlueTEXT</strong></font></span></p>\r\n<a href="http://www.google.com">Click Me</a>

For some reason, this isn't displaying correctly in Quilljs. It seems that the font elements aren't taking. I created a stackblitz to demonstrate this: https://stackblitz.com/edit/angular-ivy-c4feuv?file=src/app/app.component.ts


Solution

  • Font elements are no longer supported in HTML5, which would explain why Quilljs does not support them. The going wisdom is that they should be avoided because some browsers already don't support them.

    https://www.w3schools.com/tags/tag_font.asp

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font

    In this case, the source of the font element should be changed to use style tags instead.