Abdul Munda bio photo

Abdul Munda

I am Abdul Munda from Toronto, Canada. I am a father, husband, full-stack developer and entrepreneur. Technologies I am most interested in are Ruby on Rails, NodeJS and React

Twitter LinkedIn Github

Open Sans fonts can break accent characters

We recently added Open Sans fonts to our application and started seeing that accent characters for some languages weren't properly rendering in Firefox. Accent characters were slightly right of the main character.

Screen Shot 2015-01-04 at 10.39.57 PM

At first, we thought that this could be because we were missing a charset, so we decided to add all the character sets Open Sans provides.

<link href='http://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext' rel='stylesheet' type='text/css'/>;

We realize at this point that our data was not normalized and what was happening is that Open Sans was trying to render two separate characters (an accent character and the main character) and the accent character was not present in Open Sans charset.

<span class="s1">"ō".codepoints.to_a </span> # [111, 772]</pre>

The reason why we didn't see this issue in Chrome is because Chrome does the normalization of characters to NFC on render. We fixed this issue by normalizing our data on backend before we pass it to our Rails app.