Problem with Firefox and @font-face font embedding about jquery-fontavailable

[GoogleCodeExporter]

Original comment by [email protected] on 4 Aug 2009 at 6:18

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Using jquery.fontavailable-1.1.min.js

What is the expected output? What do you see instead?

The script is replacing the text when it should allow the test to render in 
ff3.5. If
i remove the Cufon.replace('h1'); function then the text is shown correctly with
external font.
Safari 4.0.3 exhibits no problems at all

What version of the product are you using? On what operating system?

jquery-fontavailable 1.1 - Mac OS X 10.6.1 - Firefox 3.5.2 - Safari 4


Please provide any additional information below.

Original comment by [email protected] on 16 Sep 2009 at 3:03

Attachments:

• index.php.zip

[GoogleCodeExporter]

I'm also seeing this problem with jquery.fontavailable-1.1.min.js and jQuery 
v1.3.2

Declaring the following in my stylesheet: 
@font-face {
  font-family: "Blackout Midnight";
  src: url("includes/Blackout-Midnight.ttf") format("truetype");
}

And using this JS:

<script type="text/javascript">
jQuery(document).ready(function($) {
    if(!$.fontAvailable("Blackout Midnight")) {
        Cufon.replace("#blog-title");
    }
});
</script>

FF 3.5.3 evaluates if(!$.fontAvailable("Blackout Midnight")) as 'true' while 
Safari
4.0.3 evaluates the same statement as false.

Original comment by [email protected] on 23 Sep 2009 at 10:17

[GoogleCodeExporter]

I've had the same problem as well in both Firefox and Safari. Local fonts were 
fine, and Cufon worked fine - it was 
just when using embedded fonts that it would trip up.

How I got around it was a bit of a hack. 

My suspicion is (and was) that something to do with embedded fonts is loading 
slower than fontAvaiable checks it. 
So what I did was place a pause (via Jquery-delay plugin) inside the sequence 
that changes the font-family to give it 
time to load and do whatever it needs to do. This ends up giving me the 
expected result at 70ms (whereas at 50ms I 
get inconsistent results). 

Ideally, (if my understanding serves me correctly) two parameters - one being 
the callback function, and the other 
being the delay amount. This would allow for the fontAvaiable script to remain 
independent of cufon, but also allow 
it to take into account the quirks of embedded fonts.

I have tried to come up with a solution beyond my hack, but my understand of 
programming and jquery just isnt 
deep enough.

Original comment by [email protected] on 9 Apr 2010 at 10:44

Attachments:

• jquery.fontavailable-1.1.hack.js

[GoogleCodeExporter]

I have the same problem with non-local fonts embedded via @font-face.

It is definitely just a problems of the load order. So font-available returns 
false
on the first page because the check is perfomed when the .otf file is not fully
loaded. When I go to a second page on my website it returns true because the 
font
file is cached and the font can be rendered when the font-avaibale check is 
peformed.

The problem is that the .otf file is loaded via css, otherwise it would be 
possible
to have the font-available in a callback method which is called when the font 
file is
fully downloaded. I couldn't come up with a solution so far.

Original comment by [email protected] on 27 Apr 2010 at 1:06

[GoogleCodeExporter]

I have the same problem too. I have a fix for this firefox issue, that worked 
for my FF 3.5. I made it check with two sets of test strings instead of one. 
Since it wasn't properly checking right before. So now my cufon will get 
rendered only if the font is available either via font-face or locally.

Original comment by [email protected] on 4 Mar 2011 at 12:03

Attachments:

• jquery.fontavailable-1.1.fix..min.js

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I did a check in IE and reordered the code for it to work correctly in IE.

Original comment by [email protected] on 4 Mar 2011 at 5:29

Attachments:

• jquery.fontavailable-1.1.fix2.js

[GoogleCodeExporter]

Thanks Tony! I am not going to call this project a dead project as I continue 
to use a modified verion of this internally at work. I'll incorporate your 
changes and get it pushed to the jquery site.

Original comment by [email protected] on 4 Mar 2011 at 5:36

[GoogleCodeExporter]

Glad to see author respond, I did some more testing with FF 3.0 and my edits 
wasn't working correctly so I made some more fixes, I explicitly added in fall 
back fonts that are different so when the font isn't loaded it'll fall back to 
different sets of fonts for comparison checking. Now all the browsers I have, I 
believe are detecting correctly.

My code probably needs clean up or something, but it works for me, Attatched 
edits v3.

Original comment by [email protected] on 4 Mar 2011 at 7:16

Attachments:

• jquery.fontavailable-1.1.fix3.js

[GoogleCodeExporter]

Turns out the delay feature is still needed for FF to finish loading the fonts, 
as I found out with my FF 3.6 and added delay and it works, but I found and now 
using a different solution for font detection by using font face detection 
instead at http://paulirish.com/2009/font-face-feature-detection/ from Diego 
Perini. Hope this is more helpful. Code is below:

var isFontFaceSupported = (function(){  
var 
sheet, doc = document,
head = doc.head || doc.getElementsByTagName('head')[0] || docElement,
style = doc.createElement("style"),
impl = doc.implementation || { hasFeature: function() { return false; } };

style.type = 'text/css';
head.insertBefore(style, head.firstChild);
sheet = style.sheet || style.styleSheet;

var supportAtRule = impl.hasFeature('CSS2', '') ?
        function(rule) {
            if (!(sheet && rule)) return false;
            var result = false;
            try {
                sheet.insertRule(rule, 0);
                result = !(/unknown/i).test(sheet.cssRules[0].cssText);
                sheet.deleteRule(sheet.cssRules.length - 1);
            } catch(e) { }
            return result;
        } :
        function(rule) {
            if (!(sheet && rule)) return false;
            sheet.cssText = rule;

            return sheet.cssText.length !== 0 && !(/unknown/i).test(sheet.cssText) &&
              sheet.cssText
                    .replace(/\r+|\n+/g, '')
                    .indexOf(rule.split(' ')[0]) === 0;
        };

return supportAtRule('@font-face { font-family: "font"; src: "font.ttf"; }');
})();

Original comment by [email protected] on 4 Mar 2011 at 8:10