C

17

72

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!

Clavicembalo answered 25/2, 2014 at 10:20 Comment(5)

Have you checked the page loading timeline, is your font being fetched properly? – Thibeault 25/2, 2014 at 10:36

Have you tried a cache flush? (ctrl+f5) This sometimes happens too if you don't add "http://" to your font link. – Groundhog 25/2, 2014 at 10:47

Hey, yup, fonts are fetching OK. CTRL+F5 is no help, since I've checked it on few different desktops. For now, I've managed to solve this by binding custom jQuery redraw() function, on the element which should have this font applied. It works, but I still wonder why it ain't working without hacks like this. – Clavicembalo 25/2, 2014 at 10:54

Are people still experiencing this problem? I used to but it seems Google have fixed it? – Companionate 4/12, 2014 at 17:2

does this question also apply to Chrome on an Android device? – Greenman 2/1, 2015 at 9:8

G

90

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

Geodesy answered 25/2, 2014 at 20:46 Comment(10)

My most recent web project ran into this and it was driving me crazy, thanks so much! – Areopagite 26/2, 2014 at 15:1

Hmm, other people in the bug forum were able to get it working using jquery (I wasn't able to though): jQuery('body') .delay(500) .queue( function(next){ jQuery(this).css('padding-right', '1px'); } ); – Geodesy 28/2, 2014 at 15:0

I think this worked for me in OS X, but I don't think it did work in Chrome for Windows :( – Tamarra 28/2, 2014 at 20:16

According to the Chromium bug page, the issue has been verified as "fixed' in the latest version of Chrome Canary, so a full fix can't be long now :) – Geodesy 3/3, 2014 at 13:28

This has been seriously bugging me! – Steato 21/3, 2014 at 9:29

An anonymous user also suggested that if this doesn't work, it may help to make the delay loner. – Geodesy 25/3, 2014 at 15:26

This is not working for me as well. Adding the delay may not solve it as weel then. – Faction 31/3, 2014 at 13:44

This worked perfect. For me, this CSS is a better alternative to a javascript workaround. But if this doesn't work for you, try jQuery(function() { jQuery('body').hide().show(); }); – Bastard 3/4, 2014 at 2:51

@Kabul what version of Chrome are you using? According to the bug report this issue was fixed in Chrome 34, in April 2014. You may be having a separate problem? – Geodesy 4/6, 2015 at 17:57

@Geodesy 41.0.2272.89, not the newest but definitly newer than that. – Kabul 5/6, 2015 at 23:4

M

11

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

Magma answered 9/12, 2014 at 16:10 Comment(3)

THIS. All these sill JS and CSS hacks, when all you need to do is delete "http:" – Mockup 15/2, 2015 at 10:0

same never had it, still the issue. – Kabul 4/6, 2015 at 17:23

This is a valid answer only if your site is running https, because you're trying to pull from a http resource, which the browser won't allow. – Lambrequin 7/4, 2016 at 8:48

D

9

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>

Decimalize answered 25/3, 2014 at 14:30 Comment(3)

This only fixes it intermittently for me, wish I could retract my upvote. – Urbanist 4/4, 2014 at 15:56

@KarlGlaser You can. Click again on the 'up' to revert to neutral. (Clicking 'down' skips to downvote). – Wimble 4/8, 2014 at 21:22

@Wimble It has to be edited if the grace period is over – Joettajoette 18/6, 2019 at 19:16

V

7

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>

Valine answered 4/4, 2014 at 9:24 Comment(3)

In spite of the fact that this was rated below the accepted answer this solution was on the only one which worked for me. – Carr 2/12, 2016 at 2:7

This gives an error: GET https://<insert domain name here>/chrome.css net::ERR_ABORTED 404 – Joettajoette 18/6, 2019 at 19:34

The Javascript code fixed the rendering issue! – Lazarolazaruk 13/4, 2021 at 8:12

C

2

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

Catherincatherina answered 2/3, 2014 at 19:37 Comment(0)

C

1

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

Conchology answered 1/4, 2014 at 0:30 Comment(0)

C

1

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

Use https version of URL.

Crews answered 20/9, 2015 at 21:19 Comment(0)

A

1

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.

Autobiography answered 2/4, 2016 at 9:11 Comment(0)

K

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.

Kabul answered 4/6, 2015 at 17:34 Comment(0)

A

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 .

Arrant answered 21/9, 2015 at 18:6 Comment(0)

D

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

Dominickdominie answered 3/10, 2015 at 20:31 Comment(0)

R

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.

Refer answered 18/3, 2016 at 20:29 Comment(0)

A

0

If anyone is still struggling with this issue (2019), there seems to be a bug in Google Fonts CSS generator script.

I loaded my fonts with the following tag:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300">

Every @font-face in the file contained a line like this:

src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');

As you can see, the local('sans-serif') is placed prior to the remote URL, which is wrong. This causes Chrome to load the default sans-serif font instead of the requested one.

A simple fix is to reorder the font-weight part of the URL, from Roboto:400,300 to Roboto:300,400. This causes the generator to not include the local('sans-serif') source.

Hope it helps someone.

Aquarium answered 30/3, 2019 at 21:27 Comment(0)

M

0

I'm just sharing what worked for me. Your results may vary.

I had main.css with an @import of multiple fonts, separated by a | (pipe) character. This had been working up until today. I kept all of my Google Font imports in the main CSS file because I didn't have that many. Today I added one that simply wouldn't render, either in Chrome or Firefox. I tried a different font - same problem.

Finally, I made a separate @import in another CSS file that gets loaded for several pages on the site (let's call it navbar_pages.css, for example) - this CSS gets included in the relevant pages via <link rel="stylesheet" type="text/css" href="/css/navbar_pages.css">, just like main.css does.

For some reason, having the @import in a separate CSS file solved the problem.

I suspect it is due to a limit on the number of fonts that can be called in a single @import call. More testing should be done to pin down the cause, but for now there is my workaround. If anyone has insights, please chime in with a comment.

Marabout answered 13/12, 2019 at 6:0 Comment(0)

C

-1

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.

Campaign answered 8/4, 2014 at 16:42 Comment(0)

C

-1

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}

Coroneted answered 22/4, 2015 at 15:52 Comment(0)

W

-3

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.

Wig answered 10/4, 2014 at 7:45 Comment(1)

We expect the fix to be global, not only to user that installed a custom plugin. – Emanuele 23/8, 2014 at 3:23

If the css fix does not work for you

Recommended topics

Hot tags