Faced a strange problem - the fonts that I plug into CSS are not always displayed correctly.

CSS:

@font-face { font-family: RobotoRegular; src: url(Roboto-Regular.ttf); } @font-face { font-family: RobotoMedium; src: url(Roboto-Medium.ttf); } body { font-family: RobotoRegular; } .material-button { font-size: 16px; display: inline-block; background-color: #507299; border: none; border-radius: 2px; padding: 0 16px !important; height: 36px; line-height: 36px; white-space: nowrap; font-family: RobotoMedium; font-size: 14px; text-transform: uppercase; color: #ffffff; }

Font Awesome connects in a standard way, installed via bower.

HTML:

 <button type="button" class="material-button"> <i class="icon fa fa-arrow-down"></i> Загрузить </button>

Normally, everything should look like this:

enter image description here

But sometimes, for no reason at all, the fonts appear like this:

enter image description here

Usually, this happens immediately after loading the site to the hosting. Say, the first 10 times on the page, the fonts are not displayed correctly, and then - fine ...

With what it can be connected?

  • In the browser, you did not try in the developer’s tools in the console and in the network tab to see what happens when the font is a curved display? - Visman
  • The fonts may be loading too late. You can try to raise them in the connection list higher. and also check that there are no errors in the console - lexxl
  • one
    Yes, type in the @ font-face at the very beginning of the file, besides, you need the entire font set: .eot, .woff, .ttf, .svg with indication of the formats - Alex

0