Custom @ font-face does not load in chrome (chrome non-standard fonts are not displayed)

Question

custom @font-face does not load in chrome (chrome non-standard fonts are not displayed) Using custom fonts using CSS

 @font-face { font-family:'gotham-rounded-medium'; src:url('fonts/gothumrounded_medium/gotham-rounded-medium.eot'); src:url('fonts/gothumrounded_medium/gotham-rounded-medium.eot?#iefix')format("embedded-opentype"), url('fonts/gothumrounded_medium/gotham-rounded-medium.woff')format("woff"), url('fonts/gothumrounded_medium/gotham-rounded-medium.ttf')format("truetype"), url('fonts/gothumrounded_medium/gotham-rounded-medium.svg')format("svg"); font-weight:400; font-style:normal } .custom_font{ font-family:'gotham-rounded-medium', arial, sans-serif; } 

Texts are displayed only when the screen window is resized.

So, please, is there anything that can be done to solve this problem?

Answer 1

In my case, the problem was related to the multiple inclusion of the same @ font-face made by different Angular 2 modules. Please see:

https://bugs.chromium.org/p/chromium/issues/detail?id=582198#c20

Answer 2

It seems like this is fixed in Chrome 59 if it is the same error as here: https://bugs.chromium.org/p/chromium/issues/detail?id=602968

Also, it is probably best to use only one-time font declarations. We solved the problem by reorganizing our CSS architecture and included only the faces of the font.