10

My WordPress site is here: http://pangalactic.co/

When using Chrome, users find that sometimes the text below the logo, and the text relating to the site's pages (to the right of the logo) is invisible to them. If they try refresh in Chrome it remains invisible. If they click the site logo to refresh, however, the text appears again. The relevant @font-face text is below...

@font-face {
font-family: 'BebasNeueRegular';
src: url("fonts/bebas-neue/BebasNeue-webfont.eot");
src: url("fonts/bebas-neue/BebasNeue.otf");
src: url("fonts/bebas-neue/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"),     url("fonts/bebas-neue/BebasNeue-webfont.woff") format("woff"), url("fonts/bebas-    neue/BebasNeue-webfont.ttf") format("truetype"), url("fonts/bebas-neue/BebasNeue-    webfont.svg#BebasNeueRegular") format("svg");
font-weight: normal;
font-style: normal; 
}
user3339416
  • 101
  • 1
  • 3
  • Works fine for me .probably fault of your cache. try `ctrl f5` , or try changing CSS version, or use the `!important` declaration. – krembo99 Feb 22 '14 at 04:00
  • Thanks for checking, can I confirm you're using Chrome? I have other friends also using Chrome and they are reporting the same thing. Yes, we tried ctrl F5 long ago :) Not sure what you mean about changing CSS version. As for the !important declaration, I understand what it does, but not where I'd put it...? – user3339416 Feb 22 '14 at 04:41
  • I am also on chrome, The `!important` tag refereed by @krembo99 is probably to be put with the `font-family` declaration. the CSS version u can [see here](http://stackoverflow.com/questions/1614429/what-is-style-cssver-1-tag) – Obmerk Kronen Feb 22 '14 at 04:50
  • Ok I can see how adding could work... but where to add it? I'm looking through likely suspects and seeing nothing like that to overwrite? – user3339416 Feb 22 '14 at 05:17
  • you add it to your [wp_enqueue_style](https://codex.wordpress.org/Function_Reference/wp_enqueue_style) parameters – Obmerk Kronen Feb 22 '14 at 08:39
  • does this help: http://stackoverflow.com/questions/15521130/google-warning-resource-interpreted-as-font-but-transferred-with-mime-type-appl/15522254#15522254 – 97ldave Feb 22 '14 at 10:26
  • Thanks everyone. In the end, nothing worked, so I just grabbed a similar theme and tweaked it to what I needed. Not a problem in sight. The issues with that other theme can remain a mystery. Thanks again. – user3339416 Feb 23 '14 at 00:33
  • 1
    I believe it may be this bug: https://code.google.com/p/chromium/issues/detail?id=336476 – Paul Irish Feb 24 '14 at 17:41

2 Answers2

10

Using the following hack suggested in the bug report Paul Irish linked to worked for me:

.classes-affected-by-issue
{
    -webkit-animation-duration: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.1s;
}

@-webkit-keyframes fontfix{
    from{   opacity: 1; }
    to{ opacity: 1; }
}

It forces Chrome to redraw the font which appears to fix the issue.

Keep an eye on the bug report to see when you can remove this code from your production servers.

This issue is closed as of 35.0.1867.2 canary. But keep the code in until your clients are updated to this version.

dav_i
  • 27,509
  • 17
  • 104
  • 136
2

According to the Chromium bug report this seems to happen when changing style sheets while loading the font. In my case, what caused the problem was a script for inserting social sharing buttons at the bottom of the page. That script caused the style sheets of the page to change.

The hack that made it work for me is:

$(document).ready(function(e) {
    setTimeout(function() {
        $('body').width($('body').width()+1).width('auto');
    }, 500);
});

This will force the body to resize so that the fonts will be redrawn. This assumes you're using jQuery and the css width of the body should be "auto". It will cause a short blink on the page when the font problem occurs, but at least the fonts are shown after that.

Hopefully this will be fixed in version 35.

Novi
  • 840
  • 7
  • 5