Menu
I'm building a new WordPress theme (don't know if that's relevant) and there's this issue that keeps bugging me.
I've loaded up Roboto Slab from Google Webfonts (included the CSS in <head> section). On every other browser out there, font is rendered OK, except Google Chrome. When I first load up the website in Google Chrome, texts using that custom font are NOT displayed AT ALL (even tho font-stack has Georgia as a fallback - "Roboto Slab", Georgia, serif;). After I hover the styled link, or retrigger any CSS property in Inspector - texts become visible.
Since I've started the theme some time ago, I can clearly remember that it was working perfectly before. Is this some known recent Chrome update bug?
First load:
After I reapply any of the CSS properties, get into responsive view or hover an element:
Anyone have similar issues? How should I proceed with this?
Thanks!
697
Go to advanced system settings. Click the settings button in the performance group. Check the box for "Smooth edges of screen fonts" Restart computer and your fonts will be back to normal.
Select the Menu button in the top-right corner of the browser window or press Alt + F on your keyboard. Select Settings. Click Appearance on the left-hand side then click Customise fonts on the right. Use the drop-down menus to choose which fonts to use for the Standard, Serif, San-serif and Fixed-width styles.
Apparently it's a known Chrome bug. There's a css-only workaround that should solve the problem:
body { -webkit-animation-delay: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-duration: 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } @-webkit-keyframes fontfix { from { opacity: 1; } to { opacity: 1; } } It seems like Chrome just needs to be told to repaint the text
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
