Why does a custom font ride randomly?

Question

css

Gentlemen, I have some kind of trouble with fonts in chrome. Searched the entire Internet, but did not find a description of such a problem. Although this problem is so strange that I can’t even formulate it properly. Okay, I'll try it.
Briefly speaking. There is a site with a non-standard font. It is connected as usual (everything seems to be normal)

@font-face {
  font-family: "MyriadProRegular";
  src: url("../fonts/MyriadProRegular.eot");
  src: local("☺"), url("../fonts/MyriadProRegular.eot#iefix") format("embedded-opentype"), url("../fonts/MyriadProRegular.woff") format("woff"), url("../fonts/MyriadProRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

We go to the site, look:

Everything is fine.
Press F5 a couple of times. And we see such a motherfucker.

Then we press F5 a couple more times and everything is fine again. Or not. I still don’t understand what the pattern is here - it just randomly either works or doesn’t work.
Question: why is this happening and what should be done to get rid of such a problem?

Answer 1

What does the "view item code" menu item show? when everything is not displayed normally .... Look, maybe padding has appeared ...

Answer 2

Maybe it's a problem with indenting between links?

Answer 3

Judging by what I see in the picture, you have padding set for each link in this menu - an indent from the right of 17px. Notice the difference between the first and second image. The indent between each menu item has increased by the amount of indent that appears - i.e. padding is set for all links in this menu.