Processing
 

Google Fonts are not rendering on Google Chrome

25/02/2014 10:20#1

enodekciw

Member

Joined at: 4 months ago

Post: 1

Thank: 0

Thanked: 0

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: a screenshot #1

After I reapply any of the CSS properties, get into responsive view or hover an element: a screenshot #2

Anyone have similar issues? How should I proceed with this?

Thanks!

25/02/2014 20:46Top#2

Meg

Member

Joined at: 10 months ago

Post: 3

Thank: 0

Thanked: 0

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

25/03/2014 14:30Top#3

kjetilh

Member

Joined at: 7 months ago

Post: 2

Thank: 0

Thanked: 0

The CSS fix didn't work for me, also the 0.5 sec delay script seems awkward.

This JS snippet seems to work for us:

<script type="text/javascript"> jQuery(function($) {     if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {         $('body').css('opacity', '1.0')      } }) </script> 
09/12/2014 16:10Top#4

Joined at: 4 months ago

Post: 1

Thank: 0

Thanked: 0

If the css fix does not work for you

In case the first rated post is not working, here is a solution:

remove the 'http:' in:

<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>  

or

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One); 

As explained by David Bain, most modern browsers don't actually require that you specify the protocol, they will "deduce" the protocol based on the context from which you called it

04/04/2014 09:24Top#5

Andrew

Member

Joined at: 10 months ago

Post: 472

Thank: 0

Thanked: 0

Tried the css fix alone above with no success. Finally resolved by creating a style sheet (chrome.css) containing:

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; } } 

And loading it with jquery at the bottom of the page:

<script type="text/javascript">    $(document).ready(function () {       $('head').append('<link href="/chrome.css" rel="stylesheet" />');    }); </script> 
20/09/2015 21:19Top#6

eMAD

Member

Joined at: 8 months ago

Post: 8

Thank: 0

Thanked: 0

I just faced the same issue. I it was due to HTTP/S protocol mismatch as described here.

Use https version of URL.

02/03/2014 19:37Top#7

Nate

Member

Joined at: 10 months ago

Post: 101

Thank: 0

Thanked: 0

I've incorporated the above CSS ... but I ALSO am including the following javascript in my header:

(Note, I know I haven't customized the fonts in the code below. But regardless, it still seems to help in forcing Chrome to repaint the fonts on the page ... just make sure your fonts are properly referenced elsewhere)

With the CSS mentioned above used in conjunction with the below code included in my ... at worst, all fonts on my page will show up after a second or so of delay.

Hope this helps people. Cheers.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" charset="utf-8">   $(function() { $('body').hide().show(); }); </script>   <script type="text/javascript">  //JavaScript goes here   WebFontConfig = {   google: { families: ['FontOne', 'FontTwo'] },     fontinactive: function (fontFamily, fontDescription) {    //Something went wrong! Let's load our local fonts.     WebFontConfig = {       custom: { families: ['FontOne', 'FontTwo'],       urls: ['font-one.css', 'font-two.css']     }   };   loadFonts();   } };  function loadFonts() {   var wf = document.createElement('script');   wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +     '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';   wf.type = 'text/javascript';   wf.async = 'true';   var s = document.getElementsByTagName('script')[0];   s.parentNode.insertBefore(wf, s); }  (function () {   //Once document is ready, load the fonts.   loadFonts();   })();  </script> 

Here's where I found the above: https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

01/04/2014 00:30Top#8

Joined at: 4 months ago

Post: 1

Thank: 0

Thanked: 0

I got it fixed with the JS solution, but also needed to use the latest google hosted jquery (1.11) to get it fixed.

06/04/2014 12:23Top#9

sactw

Member

Joined at: 4 months ago

Post: 1

Thank: 0

Thanked: 0

I temp solved this by append the fonts link after document is ready on buggy versions of Chrome 32 & 33 (34 is bug free). This seems to force Chrome to render fonts correctly. The only minus is a slight font blinking on buggy versions. I hope it helps

var FontsHeadTag = "<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic&subset=latin,greek' rel='stylesheet' type='text/css'>"; if (jQuery.browser.chrome) {     var ver = jQuery.browser.version;     var version = ver.substring(0.2);     if (parseInt(version) == 32 || parseInt(version) == 33) {  // buggy Chrome         jQuery(document).ready(function() {             jQuery('head').append(FontsHeadTag);         });     } else {         jQuery('head').append(FontsHeadTag); // bug free Chrome or Safari     } } else {     jQuery('head').append(FontsHeadTag); // rest of browsers } 
08/04/2014 16:42Top#10

Joined at: 4 months ago

Post: 1

Thank: 0

Thanked: 0

It may not be a silver bullet, but fixe the issue on our site by moving the fontawesome css link to the bottom of our pages as well as weblike fix listed above.

04/06/2015 17:34Top#11

b1nary

Member

Joined at: 7 months ago

Post: 4

Thank: 0

Thanked: 0

It is not a actual solution but it works better for me than everything else in this thread. I changed the font. I had Fira Sans and now just changed to Roboto which works out of the box.

21/09/2015 18:06Top#12

jimuty

Member

Joined at: 4 months ago

Post: 1

Thank: 0

Thanked: 0

i just used to delete roboto font from my windows fonts and every thing work right now.

it is maybe beacause you have older version of font on your system . i guess .

03/10/2015 20:31Top#13

Joined at: 4 months ago

Post: 1

Thank: 0

Thanked: 0

I was trying to work with Meg's answer,but like many others it didn't work for me either.

For using Google Font,found this trick[Adding Screenshots for steps].

1) Just take the url from the css or standard link as highlighted.

2) Open the link in another tab, copy whole css code(i.e. font-face) in your css file and run.

Not sure about performance as many http calls are getting added, or just try copying one font-face.

Image for step 1

Image for step 2

18/03/2016 20:29Top#14

MarcGuay

Member

Joined at: 4 months ago

Post: 1

Thank: 0

Thanked: 0

It's possible that the element has text-rendering: optimizeLegibility set which can cause this, or similar, issues. Changing it to auto fixed this problem for me with a Foundation 5 project that sets it to optimizeLegibility by default.

02/04/2016 09:11Top#15

Joined at: 10 months ago

Post: 4

Thank: 0

Thanked: 0

See similar problem in question Strange Issue while Google Font Rendering.

Solution is in loading the desired font (I my case 'Fira Sans') from the Mozilla CDN instead of Google CDN.

10/08/2016 02:43Top#16

nonphoto

Member

Joined at: 4 months ago

Post: 1

Thank: 0

Thanked: 0

This is a known bug that was fixed but has since reappeared. In my case the font appears to have loaded properly because the fallback doesn't display either, it just shows the default font for the browser. My solution (it worked for my Github Pages hosted site) is to remove the font stack. So instead of

body {   font-family: 'Space Mono' monospace; } 

Use

body {   font-family: monospace;   font-family: 'Space Mono'; } 
22/04/2015 15:52Top#17

Joined at: 4 months ago

Post: 1

Thank: 0

Thanked: 0

If people are still having this problem before you try all the great solutions on here try using an !important tag in your css to see if that will fix it, as it did for me and I am not sure if the bug is the same as the old Chrome bug.

.faultyText {"Roboto Slab", Georgia, serif !important} 
10/04/2014 07:45Top#18

Tomasz

Member

Joined at: 9 months ago

Post: 4

Thank: 0

Thanked: 0

Checkout plugin I made: https://chrome.google.com/webstore/detail/fontfix/ekgfbmjaehhpbakdbpfmlepngjkaalok

It does the web realign with pure javascript, which force browser to redraw whole page.

Similar articles

Chrome, THREE.js: Cross-origin image load denied

5 years ago - Reply: 5 - Views: 266

Prevent Google Chrome Log XMLHttpRequest

3 years ago - Reply: 5 - Views: 275

How can I include ChromeDriver in a JAR?

3 years ago - Reply: 3 - Views: 80

Chrome geolocation not working on any site

3 years ago - Reply: 1 - Views: 43

wrong borders' width in android browser

3 years ago - Reply: 4 - Views: 205

Uncaught SyntaxError: Unexpected token < On Chrome

3 years ago - Reply: 10 - Views: 461

Flashdata not getting cleared in Codeigniter

3 years ago - Reply: 5 - Views: 56

Illegal access Javascript error in Chrome

3 years ago - Reply: 1 - Views: 51

ng-repeat not updating in Chrome

3 years ago - Reply: 1 - Views: 80

Applying border to a checkbox in Chrome

4 years ago - Reply: 2 - Views: 118

open browser plugin using access vba

3 years ago - Reply: 1 - Views: 24

vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re