Font doesn't show until window resize in chrome

Question

I'm using angular2 and webpack. Loading my font like so:

@font-face {   font-family: 'bpmonoregular';   src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot');   src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot?#iefix') format('embedded-opentype'),   url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.woff') format('woff'),   url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.ttf') format('truetype'),   url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular') format('svg');   font-weight: normal;   font-style: normal; } 

If in my css I increase the font-size percentage the font won't show up unless its the first component loaded. As soon as I switch pages, it disappears. If I resize the window however, it will show up.

This only happens in chrome

Answer 1

You can try to fire a window.resize with code on document.ready as a work-around.