jQuery Block UI Font-change not working?

Question

I have the following code:

$.blockUI({
    message: '<h1><img src="http://uploadingit.com/resources/web/images/popup_working.gif"/><p style = "font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;">Loading filters... </p></h1>',
    css: {
        color:'#000000',
        backgroundColor:'#FFFFFF',
        border:'5px solid #3b5999'
    },
overlayCSS: {
        backgroundColor: '#E6E6E6'
    }
});

The font-family style changes to the block UI isn't being implemented. Anyone have an idea why? The following link doesn't make mention of CSS font-family by the way: http://malsup.com/jquery/block/#options.

Answer 1

Assuming the blockUI jquery widget doesn't strip out the font-family set on the p attribute, I think your problem might be with the use of double quotes for Seqoe UI

This is the HTML for the message:

<h1>
    <img src="http://uploadingit.com/resources/web/images/popup_working.gif"/>
    <p style = "font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;">Loading filters... </p>
</h1>

The style attribute starts with a double quote. When the HTML parser gets to the first double quote for "Seqoe UI", it will close the style attribute:

style = "font-family: Optima, Segoe, "

Use single quotes around Segoe UI. Or better yet, define a class.