That’s .. not OK, obviously. What theme did you observe that behavior with John? I’ll have a look at that in the coming days.
Hmm, been looking at this and you might have discovered a small bug (indeed depending on browser).
If you’re not scared of code, could you open up wp-content/plugins/autoptimize/classes/autoptimizeStyles.php and on line 449 replace
$replace[$hash] = 'url('.$newurl.')';
with
$replace[$hash] = 'url(\''.$newurl.'\')';
This should solve your @font-face and should hopefully not cause regressions.
Looking forward to your feedback,
frank
Applied theme are Pinboard on WP 3.8.1 and Twenty Fourteen on WP 3.9
Added css code is:
@font-face {
font-family: 'webfontname';
src: url('/webfont.eot');
src: url('/webfont.eot?#iefix') format('embedded-opentype'),
url('/webfont.woff') format('woff'),
url('/webfont.ttf') format('truetype'),
url('/webfont.svg#webfontname') format('svg');
font-weight: normal;
font-style: normal;
}
I’m afraid, changing the mentioned line didn’t help.
OK thanks, I’ll do some tests with twentyfourteen.
Both themes get their fonts from Google (e.g. for pinboard by insourcing CSS from http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic|Oswald:300,300italic,regular,italic,600,600italic&subset=latin), right? Or do you also see (or did you add) local fonts?
Well, challenge comes with RTL websites (fa_IR), so the font repository should be local. Here is a link to the webfont package which is made by FontSquirrel.com: download fontsquirrel webfont kit.
if you want I can set up a similar fa_IR website for your tests.
Hmm, seems to work for me at first sight. How did you integrate the fontsquirrel css? Do you have a URL where I could have a look (preferably with Autoptimize activated, so I can see the page in a broken state)?
I tested the issue on a fresh WP and there wasn’t any problem: Here
But the problem is on the main websites: Here or Here
So with a fresh WP no matter what theme is activated, it works fine. I doubted if it would be related to CF CDN, but it wasn’t. And I disabled plugins, it didn’t change anything.
Weird, I see the woff-files loaded OK, as can be seen in e.g. these webpagetest.org-tests;
http://www.webpagetest.org/result/140707_T9_H0P/ (wequest.ir with Firefox)
http://www.webpagetest.org/result/140707_VB_H1D/ (seppidar.ir with Chrome)
can you double-check?
frank
You’re right, weird. Font seems loaded, but with css optimization on, it doesn’t act (instead page get rendered with tahoma). So I regulate presumes to survey more accurately:
– css optimization on: font can be loaded and works on chrome,safari,opera and doesn’t work on firefox,ie.
– css optimization off: font can be loaded and works fine in all browsers.
OK, could you re-enable CSS optimization tomorrow (tuesday) morning on one of those two sites, so I can do some inspect firefox’s developement tools and see what goes wrong?
Here is enabled, and here is disabled, thanks for help.
Found the problem, I just removed AO’s “CDN Base URL” and problem has been solved. Case studies will remain intact for more analysis. @frank
Optimize CSS Code: here is enabled, and here is disabled.
Thanks for the update John, saves me the time to dig in 😉
The reason why moving fonts to CDN does not work on FF & MSIE is explained in this article (this is independant of Autoptimize).
frank
As I read the article and double thought about “CDN Base URL”, I think it would cause some other issues like static files loading delay or conflict with WP upload folder access through a subdomain. So I disabled the option.
