Flicker of non-Cufon font on load in some browsers
78 views
Skip to first unread message
thesheep
Jun 24, 2009, 6:25:12 AM6/24/09
to cufón
We've just launched a new website for a UK Higher Education
organisation that makes extensive use of Cufon including in the
navigation. I think the typography looks really good. Here is the
site: http://www.publicengagement.ac.uk.
I've had reports that on some browsers on some computers, there is a
delay in loading the Cufon fonts, where the original font is displayed
instead, which looks pretty ugly. My colleague managed to catch a
screenshot of this happening in Firefox on the PC. You can see the
screenshot here:
http://tinyurl.com/nr4yd2
He tells me that the same thing happens in Opera. But IE7 is fine.
On my computer, at a different geographical location, using the same
browsers, this issue does not occur. But obviously it is quite a nasty
bug when it does happen so I need to try and root out the problem.
Any ideas?
organisation that makes extensive use of Cufon including in the
navigation. I think the typography looks really good. Here is the
site: http://www.publicengagement.ac.uk.
I've had reports that on some browsers on some computers, there is a
delay in loading the Cufon fonts, where the original font is displayed
instead, which looks pretty ugly. My colleague managed to catch a
screenshot of this happening in Firefox on the PC. You can see the
screenshot here:
http://tinyurl.com/nr4yd2
He tells me that the same thing happens in Opera. But IE7 is fine.
On my computer, at a different geographical location, using the same
browsers, this issue does not occur. But obviously it is quite a nasty
bug when it does happen so I need to try and root out the problem.
Any ideas?
Simo Kinnunen
Jun 24, 2009, 6:58:54 AM6/24/09
to cu...@googlegroups.com
Hi,
You have to move Cufon.now() before the Google Analytics code, like
mentioned in http://wiki.github.com/sorccu/cufon/usage and
http://wiki.github.com/sorccu/cufon/api.
You're also loading swfobject.js inside <body>, which is likely to
cause a delay. Move it to <head> and you should be good to go.
Simo
You have to move Cufon.now() before the Google Analytics code, like
mentioned in http://wiki.github.com/sorccu/cufon/usage and
http://wiki.github.com/sorccu/cufon/api.
You're also loading swfobject.js inside <body>, which is likely to
cause a delay. Move it to <head> and you should be good to go.
Simo
thesheep
Jun 25, 2009, 10:02:52 AM6/25/09
to cufón
Hi, thanks Simo!
We'll make those changes.
Ben
------------
On Jun 24, 11:58 am, Simo Kinnunen <sor...@gmail.com> wrote:
> Hi,
>
> You have to move Cufon.now() before the Google Analytics code, like
> mentioned inhttp://wiki.github.com/sorccu/cufon/usageandhttp://wiki.github.com/sorccu/cufon/api.
We'll make those changes.
Ben
------------
On Jun 24, 11:58 am, Simo Kinnunen <sor...@gmail.com> wrote:
> Hi,
>
> You have to move Cufon.now() before the Google Analytics code, like
jizepi
Jun 26, 2009, 6:19:43 AM6/26/09
to cufón
I'm also having trouble with the non-Cufon font appearing, but only in
Google Chrome, all the other browsers work fine.
You can see an example of the font flicker here: http://screencast.com/t/46aAsJXOgQi
Any ideas?
Mike
Google Chrome, all the other browsers work fine.
You can see an example of the font flicker here: http://screencast.com/t/46aAsJXOgQi
Any ideas?
Mike
Simo Kinnunen
Jun 26, 2009, 7:56:27 AM6/26/09
to cu...@googlegroups.com
Hi Mike,
It's very hard to say anything without seeing any code. Here's a few
things you can try:
1. Make sure that all your <link>s and <style>s are loaded before any <script>s
2. Make sure that you have no <script src=".."> in <body> (or before
Cufon.now(), after is fine)
It's also possible that once you have some real content on the pages
the problem will simply go away (style sheets will have more time to
load).
If 1 & 2 don't help, you'll have to share some code. A live page would
obviously be the best if possible, you can send the URL / files
directly to me if you don't want to post it here.
Simo
It's very hard to say anything without seeing any code. Here's a few
things you can try:
1. Make sure that all your <link>s and <style>s are loaded before any <script>s
2. Make sure that you have no <script src=".."> in <body> (or before
Cufon.now(), after is fine)
It's also possible that once you have some real content on the pages
the problem will simply go away (style sheets will have more time to
load).
If 1 & 2 don't help, you'll have to share some code. A live page would
obviously be the best if possible, you can send the URL / files
directly to me if you don't want to post it here.
Simo
jizepi
Jun 26, 2009, 9:33:14 AM6/26/09
to cufón
Hi Simo
I think it may be to do with the fact that I'm using ASP.NET, which
seems determined to spit bits of script at the top of the <body>
section, so there's nothing I can do about that.
May have to abandon....
Mike
I think it may be to do with the fact that I'm using ASP.NET, which
seems determined to spit bits of script at the top of the <body>
section, so there's nothing I can do about that.
May have to abandon....
Mike
Simo Kinnunen
Jun 26, 2009, 11:47:57 AM6/26/09
to cu...@googlegroups.com
Hi Mike,
If they're at the very top of the page (before any content) it
shouldn't be a problem. If possible I'd like to see at least the HTML
source.
One more thing you can try is to get rid of any CSS @imports if you're
using them. Chrome loads @imported style sheets separately from the
main style sheet which in some cases may be enough to cause a delay is
your HTML / CSS ratio is very low.
Simo
If they're at the very top of the page (before any content) it
shouldn't be a problem. If possible I'd like to see at least the HTML
source.
One more thing you can try is to get rid of any CSS @imports if you're
using them. Chrome loads @imported style sheets separately from the
main style sheet which in some cases may be enough to cause a delay is
your HTML / CSS ratio is very low.
Simo
jizepi
Jun 26, 2009, 7:06:42 PM6/26/09
to cufón
Sorry Simo, I've ditched Cufon for this project, and gone back to sIFR
--- it's just too much work to try and persuade ASP.NET to put
everything in the right order. Works great mostly, but can't afford to
spend the time tweaking everything trying to get rid of the flicker.
Will definitely be using it on other non-ASP.NET jobs though.
Mike
--- it's just too much work to try and persuade ASP.NET to put
everything in the right order. Works great mostly, but can't afford to
spend the time tweaking everything trying to get rid of the flicker.
Will definitely be using it on other non-ASP.NET jobs though.
Mike
Simo Kinnunen
Jun 26, 2009, 7:26:31 PM6/26/09
to cu...@googlegroups.com
Hi Mike,
Sure, no problem. It might have been useful for you to find out the
exact cause though. And I'm just going to say this in case anyone got
the wrong impression: using ASP.NET does NOT prevent you from using
Cufón.
Simo
Sure, no problem. It might have been useful for you to find out the
exact cause though. And I'm just going to say this in case anyone got
the wrong impression: using ASP.NET does NOT prevent you from using
Cufón.
Simo
Mark Wubben
Jun 28, 2009, 11:59:36 AM6/28/09
to cu...@googlegroups.com
The way sIFR solves this issue is by adding a class name to the <html>
or <body> element when it is activated (before replacements are done).
This then lets you write some CSS to hide the HTML text:
.sIFR-active h1 {
visibility: hidden;
}
When the <h1> is replaced, a class name is added to it which makes
sure the element is visible again.
--
Mark Wubben
http://supercollider.dk
or <body> element when it is activated (before replacements are done).
This then lets you write some CSS to hide the HTML text:
.sIFR-active h1 {
visibility: hidden;
}
When the <h1> is replaced, a class name is added to it which makes
sure the element is visible again.
Mark Wubben
http://supercollider.dk
Simo Kinnunen
Jun 30, 2009, 1:22:46 PM6/30/09
to cu...@googlegroups.com
Hi Mark,
Nice to see you here! I've been considering a similar approach for a
quite some time, but there are still a few issues I'm pondering about.
For one, visibility: hidden doesn't really solve the problem, it
merely makes it more difficult to spot. The delay will still be there,
but instead of seeing the original text you'll see nothing. Now a
better way would be to solve the root cause by re-organizing external
scripts to make sure that nothing prevents the content from being
loaded in one go. It may sometimes be difficult or even impossible to
do that, though.
Another issue with visibility: hidden is that it would require Cufón-
specific CSS which is something we're trying to avoid. It would be
possible to create the CSS rules on the fly, though (assuming you're
using CSS selectors with .replace()), which is probably what we're
going to do.
There's also the minor issue of possibly un-hiding an intentionally
hidden element, but such a scenario is quite unlikely.
Simo
Nice to see you here! I've been considering a similar approach for a
quite some time, but there are still a few issues I'm pondering about.
For one, visibility: hidden doesn't really solve the problem, it
merely makes it more difficult to spot. The delay will still be there,
but instead of seeing the original text you'll see nothing. Now a
better way would be to solve the root cause by re-organizing external
scripts to make sure that nothing prevents the content from being
loaded in one go. It may sometimes be difficult or even impossible to
do that, though.
Another issue with visibility: hidden is that it would require Cufón-
specific CSS which is something we're trying to avoid. It would be
possible to create the CSS rules on the fly, though (assuming you're
using CSS selectors with .replace()), which is probably what we're
going to do.
There's also the minor issue of possibly un-hiding an intentionally
hidden element, but such a scenario is quite unlikely.
Simo
Reply all
Reply to author
Forward
0 new messages