Font doesn't show until window resize in chrome
You can try to fire a window.resize with code on document.ready as a work-around.
Try to load font-face using static css (style tag or link) instead of component styles.
Chrome utilises the .svg file in the @font-face kit, and it shouldn't be called last. Try re-arranging your code like that:
@font-face { font-family: 'bpmonoregular'; url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular') format('svg'), url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.woff') format('woff'), url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.ttf') format('truetype'), src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot'); src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot?#iefix') format('embedded-opentype'); font-weight: normal; font-style: normal;}Put url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular') format('svg') on the first line.
The main solution was found here on this website: Font Face Rendering on Chrome