qTip + TypeKit

[Alvin]

This may be beyond the scope of qTip support but I figured it can't hurt to ask.

I'm using TypeKit in conjunction with qTip. As expected, I'm getting the dreaded Flash of Unstyled Text (FOUT) when Firefox initially loads the page, before TypeKit has a chance to substitute its fonts.

If it were on the initial page load, that's something that I could handle and there are numerous solutions available. The problem I'm facing is when I mouseover an element which pops up a qTip, I'm getting the FOUT with every popup.

Just in case it helps, here's the code I'm using for both:

JS Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1.0.6/webfont.js"></script>
<script type="text/javascript">
//<![CDATA[
     WebFont.load({
          typekit: { id: '[my TypeKit ID]' }
     });
//]]>	
</script>
<script type="text/javascript" src="/js/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
//<![CDATA[
    $(document).ready(function () 
    {
        $.fn.qtip.styles.win = {
            width: 400,
            padding: 10,
            border:
            {
                width: 5,
                radius: 0,
                color: '#c5e9ff'
            },
            tip:
            {
                size:
                {
                    x: 10,
                    y: 10
                }
            },
            name: 'light'
        }
        $(".tip-right-event").each(function () 
        {
            $(this).qtip(
            {
                content:
                {
                    url: 'tooltip_event.aspx',
                    data: { id: $(this).attr('title') },
                    method: 'post'
                },
                position:
                {
                    corner:
                    {
                        target: 'rightMiddle',
                        tooltip: 'leftMiddle'
                    }
                },
                style:
                {
                    tip: 'leftMiddle',
                    name: 'win'
                }
            })
        })
        $(".tip-left-event").each(function () 
        {
            $(this).qtip(
            {
                content:
                {
                    url: 'tooltip_event.aspx',
                    data: { id: $(this).attr('title') },
                    method: 'post'
                },
                position:
                {
                    corner:
                    {
                        target: 'leftMiddle',
                        tooltip: 'rightMiddle'
                    }
                },
                style:
                {
                    tip: 'rightMiddle',
                    name: 'win'
                }
            })
        })
        $(".tip-right-nextstep").each(function () 
        {
            $(this).qtip(
            {
                content:
                {
                    url: 'tooltip_nextstep.aspx',
                    data: { id: $(this).attr('title') },
                    method: 'post'
                },
                position:
                {
                    corner:
                    {
                        target: 'rightMiddle',
                        tooltip: 'leftMiddle'
                    }
                },
                style:
                {
                    tip: 'leftMiddle',
                    name: 'win'
                }
            })
        })
    });
//]]>	
</script>

[/code]

[Craig]

Alvin, just out of curiosity is there a reason you're not using native WebFonts? That would solve this issue and remove the TypeKit dependency as well. Google released a great font library lately also. You can check Paul Irish's blog for lots of details on these.