1

I have converted material svg as font icons in my project using GULP, similar to custom icon fonts. Occasionaly, these font-icons are appearing jumbled/empty and on refresh, all icons are arranged properly in the site.

Example: instagram icon instead of apple icon

This happens occasionally and only in published site, why is it happening like this and how to solve this?

Note: After adding text-rendering:optimizeLegibility; in font css , this issue started.

Thanks

Community
  • 1
  • 1
Srividya
  • 11
  • 2
  • Can you expand a bit the problem: are you seeing no icons? Are you seeing a [FOIT](https://css-tricks.com/fout-foit-foft/)? – MarcoL Jul 25 '16 at 13:14
  • when the page loads for the first time, All the icons are misplaced or empty. for example, the Apple icon is replaced with instagram icon, arrow icon is empty. – Srividya Jul 25 '16 at 14:33
  • Are you including multiple font icons definition in the page? – MarcoL Jul 25 '16 at 17:06
  • We are using two custom font icons definition. – Srividya Jul 28 '16 at 04:10
  • I suspect that what you see on first load is the page rendered without the fonts assets or with the fonts partially loaded. Have a try using a WebFontLoader to load the fonts. – MarcoL Jul 28 '16 at 05:43

0 Answers0