Search code examples
cssfontsnewlinemicrosoft-edgewebfonts

New line character and <br> get rendered as rectangle box on Microsoft Edge

The Problem:

If your website use custom font for non-Latin languages (eg. Japanese, Chinese...) or use font icon, sometime the newlines (and <br> tags) will be rendered as a rectangle.

So on Chrome/Firefox it looks like this:

enter image description here

But on Edge it looks like this:

enter image description here

How do we solve this?

Solution

  • The issue is because on Edge a space character (0x20) is rendered at new lines, and your font doesn't have a glyph for Amerino Latin space character.

    This is a known issue (which is marked as resolved but apparently it's not)

    The simplest solution, if your issue only occur with <br> tags, is to style <br> and make them use a default system font:

    br {
  font-family: initial !important; /* Fix error on Edge (br render a Latin space character) */
}

    If you are having issues with in-paragraph new line (e.g. \n character in an article), you're stuck with the lengthy solution of adding the white space glyph into your custom font.

    You can use libraries like fonttools to edit the original ttf/otf, adding in a 0x20 glyph, and after that it will work fine.