Font Awesome Icons showing as squares between navigation [Chrome Only]
I think it is just FUOC. In your case fonts are loaded with delay. For some reasons they are no cached (maybe developer tools are opened?).
You can try to reproduce this error by simulating slow internet connection on chrome.If you do it you would probably also see this squares.
You would probably need to implement preloader screen and only show content of page every asset is loaded. You will have to create some div which will cover whole page, and then remove it when document is ready.
Here's example.
Reorder the font formats in your @font-face so that WOFF is placed before TTF and SVG. SVG fonts render better in the browsers that support them. Therefore make it default.
put all fonts file like .ttf,woff,woff2,also put SVG of it. Make sure that check give a font family name also. Also check fonts calling path. May be its helps you :)