Chrome v33 bug - WebFonts not working

Discussion in 'HTML & Website Design' started by AbstractChaos, Apr 3, 2014.

  1. #1
    Hi guys,
    thought i'd let everyone know, if you are using web fonts v33 of chrome will make the text disappear when you refresh the page.

    It is due to the bug described
    https://code.google.com/p/chromium/issues/detail?id=336476

    Searching found a few quick work arounds just to use while the update to chrome propagates.
    1. use the javascript import script below (this only method that worked for me)
     <!-- Remove asap -->
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Ubuntu:400,700:latin' ] }
      };
      (function() {
        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);
      })(); </script>
    HTML:
    2. Forcing a render using css3 animations
    p{
        -webkit-animation-duration: 0.1s;
        -webkit-animation-name: fontfix;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: linear;
        -webkit-animation-delay: 2s;
    }
    
    @-webkit-keyframes fontfix{
        from{     opacity: 1; }
        50%{    opacity: 0.8; }
        to{    opacity: 1; }
    }
    HTML:
    Source: https://code.google.com/p/chromium/issues/detail?id=336476#c42

    Was scary to lose all the text lol.

    Note: I didn't want to use web-fonts but no choice as it was one of those (here is a psd) type designers
     
    Last edited: Apr 3, 2014
    AbstractChaos, Apr 3, 2014 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Does the problem exist with "real" self hosting webfonts, or is it specific to Google fonts? Just wondering since that script only targets the latter.

    Unable to recreate that here at all using either... is it fixed already? (I'm on 33.0.1750.154) Is it OS Specific? Is it just chromium or also regular chrome?

    Though since scripting or animations fixes it, I'd not be surprised if it's something else on the page interfering like an unclosed element, script-tardery, HTML 5 polyfills (which I've seen screw up browsers they're not even supposed to run in...), CDATA/render elements inside HEAD, STYLE in BODY where it's invalid, or any of the dozen other bits of invalid markup and page bloat present on the test-case from the bug page. (WhiteByte)

    I mean, when a page is knee deep in garbage code like that WhiteByte site is, with endless pointless halfwit static style inlined, STYLE as a tag where it's not allowed, DIV where it's not allowed (inside HEAD), unclosed tags, and that X-UA-Compatible BS mated to endless IE CC's to sweep developer ineptitude under the rug, having a 'disappearing content bug' is hardly a shock.

    Though again, another inaccessible absurdly thin and piss poor rendering font too. Every time I see that type of crap I want to kick a PSD jockey in the nerts.

    Is your site that's encountering the problem similarly flawed?
     
    deathshadow, Apr 3, 2014 IP