Accented characters using Web font are not correctly displayed




Layout: Text
3 years ago
3 years ago


(Reporter: Fabien Leroux, Unassigned)


40 Branch
Mac OS X

Firefox Tracking Flags

(Not tracked)




(1 attachment)



3 years ago
Created attachment 8655386 [details]
screenshot windows 8

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:40.0) Gecko/20100101 Firefox/40.0
Build ID: 20150826023504

Steps to reproduce:

1. Go to the page

Actual results:

The accented characters are displayed:
- with an extra space on OSX (V. 10.10.5 / FF 40.0.3)
- with the accent at the wrong place on Windows (Windows 8 / FF 40.0.3)

Expected results:

The accented characters should be displayed correctly, like on the page or on any other browser.

Some others Fonts have been tested with the same result: Open Sans, PT Sans.

The issue is still there with no CSS styles except:
@import url(;
html {
  font-family: 'Open Sans', sans-serif;


3 years ago
Component: Untriaged → General
OS: Unspecified → Mac OS X
Hardware: Unspecified → x86_64

Comment 1

3 years ago
Same issue with IE11 on Win 7.
Component: General → Layout: Text
Product: Firefox → Core
The page at uses decomposed sequences (e.g. <letter e, combining acute accent>) rather than precomposed characters such as e-acute. But the webfonts used do not support the combining marks, and therefore font fallback kicks in, they get rendered from some other font on the system, and their placement is likely to be poor. The exact results will vary between browsers and platforms, depending on many details of the text rendering implementation and the available fonts.

In general, the use of precomposed characters (Unicode form NFC) is highly recommended on the Web, for better compatibility and interoperability. If the author insists on using decomposed sequences, then they need to ensure that the fonts chosen include full support for the combining characters. Typical "Latin-1 subset" webfonts, for example, do NOT provide this.

Comment 3

3 years ago
OK, thank you very much for the explanation, this is totally right and has been fixed easily. Just one thing: how did you find that it is decomposed sequence, because this is not visible from the source code?
Last Resolved: 3 years ago
Resolution: --- → WONTFIX
I recognized from the rendering problems that we were looking at a case of decomposed combining marks that were not well supported by the font being used.

Using the Fonts tab in the Web Developer > Inspector tool confirmed that the text was using a mixture of two fonts, the intended web font and a fallback (Helvetica, in my case, but this would depend on the platform) that is being applied to the diacritics.

One way to tell for sure is by making the text editable (use the Inspector to add the contentEditable attribute to an element), and then observe that when backspacing through one of the accented letters, first the accent is deleted and then a second keystroke deletes the base letter. With precomposed text, the complete accented character will be deleted in a single step.

Comment 5

3 years ago
Great, thanks again!
You need to log in before you can comment on or make changes to this bug.