5

custom @font-face does not load in chrome(chrome custom fonts not rendering) 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;
}

enter image description here

The texts are showing only when you resize the screen window.

So please is there something that it can be done to solve this issue?

sKhan
  • 9,694
  • 16
  • 55
  • 53
Dnyaneshwar Shedge
  • 51
  • 1
  • 3
  • 1
    We need more code. Can't debug from just this. But anyway, are you saying the text does not show at all? And how about other browsers? – Mr Lister Feb 18 '16 at 07:19
  • Any resize, or to a particular size? Could there be a media-query taking effect when you resize? – Boaz Feb 18 '16 at 08:16
  • A bit more of the "Styles" section in the screenshot would come in handy. – Alexander Pavlov Feb 18 '16 at 12:43
  • Today i tested with google font i don't show blank text. its work fine. I think this is font load issue. gotham-rounded-medium.woff font size is 29kb. so let me know how i change font family after load all font file in javascript. – Dnyaneshwar Shedge Feb 19 '16 at 06:46
  • 1
    issue solved :) using this reference - https://www.filamentgroup.com/lab/font-loading.html – Dnyaneshwar Shedge Feb 19 '16 at 10:34

2 Answers2

4

In my case the problem was connected with 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

marekozw
  • 356
  • 2
  • 7
0

Looks like this is getting fixed in Chrome 59 if it is the same bug as listed here: https://bugs.chromium.org/p/chromium/issues/detail?id=602968

Also - it's probably a better practice to only include font-face declarations once. We solved the issue by refactoring our CSS architecture and only including font-faces once.

Jason Awbrey
  • 889
  • 9
  • 11