Roboto Font Missing Characters in Ionic
By default, all text in Ionic 2 uses Roboto font, which is also bundled with the framework and automatically distributed with every created application. This all sounded great, until I noticed that some characters are rendered with a different font:
If you look closely at the above image, you can notice that characters with caron (č, š and ž) slightly differ from their non-caron counterparts (c, s and z). In fact, none of the characters from the Latin Extended charset are rendered with Roboto font. One of the fallback fonts defined in the default CSS is used instead. This is most noticeable in desktop browsers. Many mobile browsers don't manifest this behavior. Hence, this might only be an issue if you plan to deploy your application as a website.
The problem is caused by Roboto font files, which are bundled with Ionic. They only include the basic Latin charset to reduce the file sizes. To resolve the issue, you need to replace the bundled Roboto files with their full versions. The best place to download them all at once is probably the GitHub repository - you can simply download the whole repository as a ZIP archive.
To overwrite Ionic's Roboto files during build, their full counterparts must be put into src/assets/fonts folder. Ionic includes 4 of the font weights (roboto-light, roboto-regular, roboto-medium and roboto-bold) in 3 formats (ttf, woff and woff2), so these are the 12 files that you need to copy. Unlike the files in the Git repository, Ionic requires all file names to be lower case, therefore you need to rename them in order to avoid problems on case sensitive file systems and web servers.
After a rebuild, all the characters will be rendered correctly:
There is a downside to this fix - files with all characters are significantly larger. If you don't use any of the missing characters or the problem doesn't manifest itself in your use cases, you better stick with the smaller bundled files.
