Comments on: CSS @font-face flickering in Firefox, somewhat solved http://www.boxcarpress.com/us/blog/2009/11/05/css-font-face-flickering-in-firefox-somewhat-solved/ Thu, 09 Feb 2012 04:33:57 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Nick http://www.boxcarpress.com/us/blog/2009/11/05/css-font-face-flickering-in-firefox-somewhat-solved/comment-page-1/#comment-478 Nick Tue, 26 Oct 2010 21:51:37 +0000 http://boxcarpress.com/us/blog/?p=633#comment-478 Dude. You freaking rule. This solved all my issues. Dude. You freaking rule. This solved all my issues.

]]> By: Alex http://www.boxcarpress.com/us/blog/2009/11/05/css-font-face-flickering-in-firefox-somewhat-solved/comment-page-1/#comment-462 Alex Wed, 06 Oct 2010 04:05:05 +0000 http://boxcarpress.com/us/blog/?p=633#comment-462 Why not to hide just text which is affected? Instead of flashing page font face will work as on webkit, ie only text will be hidden until the font is loaded. Why not to hide just text which is affected? Instead of flashing page font face will work as on webkit, ie only text will be hidden until the font is loaded.

]]> By: Aaron http://www.boxcarpress.com/us/blog/2009/11/05/css-font-face-flickering-in-firefox-somewhat-solved/comment-page-1/#comment-451 Aaron Wed, 29 Sep 2010 16:55:16 +0000 http://boxcarpress.com/us/blog/?p=633#comment-451 I dig the solution but I was still seeing a flicker when the content loaded so I modified your script a little. It works well for me. Input always appreciated. function removeLoading() { $('#main').animate({ opacity:1 }, 700, function() { $('#main').removeClass('loading'); }); } if($.browser.mozilla){ $('#main').addClass('loading'); $(window).load(function() { setTimeout ( "removeLoading()", 100 ); }); }; I dig the solution but I was still seeing a flicker when the content loaded so I modified your script a little. It works well for me. Input always appreciated.

function removeLoading() {
$(‘#main’).animate({
opacity:1
}, 700, function() {
$(‘#main’).removeClass(‘loading’);
});
}
if($.browser.mozilla){
$(‘#main’).addClass(‘loading’);
$(window).load(function() {
setTimeout ( “removeLoading()”, 100 );
});
};

]]> By: @font-face: CSS3 basierte Schriftvielfalt « am530: Der Blog von Axel Michel http://www.boxcarpress.com/us/blog/2009/11/05/css-font-face-flickering-in-firefox-somewhat-solved/comment-page-1/#comment-375 @font-face: CSS3 basierte Schriftvielfalt « am530: Der Blog von Axel Michel Tue, 15 Jun 2010 13:33:59 +0000 http://boxcarpress.com/us/blog/?p=633#comment-375 [...] Rendering die Dritte, das Verhalten beim Laden der Seite: Das Laden einer Schriftdatei kostet Zeit – wie lange, das ist abhängig von vielen Faktoren – aber es ist spürbar und manchen Fällen sogar sichtbar. Firefox rendert den Text zunächst mit einem Webstandard-Font. Erst wenn die individuelle Font-Datei vollständig geladen ist, wechselt die Ansicht, die Seite “flackert”. Je größer die Unterscheidung zwischen dem nachgeladenen Font und dem websicheren Fallback, desto augenfälliger wird das Ganze. Beim Webkit hingegen werden die Inhalte erst eingeblendet, wenn die entsprechende Datei geladen ist. Steve Souders gibt in seinem Blog noch den wichtigen Hinweis, dass im Internet Explorer überhaupt nichts passiert, bis die Schriftdatei fertig geladen ist – unter der Vorraussetzung, dass es vor der CSS Syntax einen SCRIPT Block gibt. Paul Irish beschreibt in seinem Artikel Fighting the @font-face FOUT eine JavaScript basierte Lösung, die das Verhalten vom Webkit nachbildet, um so den “flash of unstyled text” (FOUT) zu unterdrücken, eine alternatives Szenario – in Kombination mit Jquery findet man bei BoxCar Press. [...] [...] Rendering die Dritte, das Verhalten beim Laden der Seite: Das Laden einer Schriftdatei kostet Zeit – wie lange, das ist abhängig von vielen Faktoren – aber es ist spürbar und manchen Fällen sogar sichtbar. Firefox rendert den Text zunächst mit einem Webstandard-Font. Erst wenn die individuelle Font-Datei vollständig geladen ist, wechselt die Ansicht, die Seite “flackert”. Je größer die Unterscheidung zwischen dem nachgeladenen Font und dem websicheren Fallback, desto augenfälliger wird das Ganze. Beim Webkit hingegen werden die Inhalte erst eingeblendet, wenn die entsprechende Datei geladen ist. Steve Souders gibt in seinem Blog noch den wichtigen Hinweis, dass im Internet Explorer überhaupt nichts passiert, bis die Schriftdatei fertig geladen ist – unter der Vorraussetzung, dass es vor der CSS Syntax einen SCRIPT Block gibt. Paul Irish beschreibt in seinem Artikel Fighting the @font-face FOUT eine JavaScript basierte Lösung, die das Verhalten vom Webkit nachbildet, um so den “flash of unstyled text” (FOUT) zu unterdrücken, eine alternatives Szenario – in Kombination mit Jquery findet man bei BoxCar Press. [...]

]]> By: Paul Irish http://www.boxcarpress.com/us/blog/2009/11/05/css-font-face-flickering-in-firefox-somewhat-solved/comment-page-1/#comment-116 Paul Irish Sat, 07 Nov 2009 21:27:31 +0000 http://boxcarpress.com/us/blog/?p=633#comment-116 Thanks for sharing this Harold, good stuff - it's definitely an improvement on Typotheque's original code. Your work inspired me to de-jquerify it, as well as clean up a few things: <a href="http://paulirish.com/2009/fighting-the-font-face-fout/#defeatthefout" rel="nofollow">Defeat the FOUT entirely</a> Thanks for sharing this Harold, good stuff – it’s definitely an improvement on Typotheque’s original code.
Your work inspired me to de-jquerify it, as well as clean up a few things:
Defeat the FOUT entirely

]]> By: Peter Bilak http://www.boxcarpress.com/us/blog/2009/11/05/css-font-face-flickering-in-firefox-somewhat-solved/comment-page-1/#comment-115 Peter Bilak Sat, 07 Nov 2009 18:04:27 +0000 http://boxcarpress.com/us/blog/?p=633#comment-115 Thanks Harold. I've linked to this solution on our FOUT page. http://www.typotheque.com/webfonts/FOUC Thanks Harold. I’ve linked to this solution on our FOUT page. http://www.typotheque.com/webfonts/FOUC

]]>