Q:

iframe bug that cannot get the right font with jquery sometimes

So currently I have a bug that needs to be resolved, I think I've located what's wrong, but I am still not sure how to solve it. 
I have a iFrame that is loaded with content through jQuery like this:
var content = {{ json_encode($template) }};
$('#preview-iframe').contents().find('html').html(content);

And in action it looks like: http://jsfiddle.net/9aV8v/
So I have some form elements that looks like:
            <select name="ccpick" data-obj=".custom-color-1" class="fontpick">
                <option value="Verdana">Verdana</option>
                <option value="NeutraText-Book">NeutraText-Book</option>
                <option value="Arial">Arial</option>
            </select>

And it does work: http://jsfiddle.net/K9pL7/
The problem occurs when I need to set the default font, color or size (that is also some elements on the page). 
For some reason it works here: http://jsfiddle.net/ScYgy/1/
After the fontpick option, I use a plugin named Select2 too make them pretty:
    $(".fontpick").selectize({});
   $(".fontsizepick").selectize({});

However on my page with all these elements and more stuff added it does not work.  It seems like, in Firefox it returns the wrong font:

As you can see the (9) false, is a console.log() It was from Chrome, when I updated 2 times it started to work suddenly. 
   console.log($(this).text() === $("#preview-iframe").contents().find($(this).parent().data('obj')).css('font-family'));

If I console.log in Firefox, what font it actually finds: It returns ""serif""
Also one problem is that when I try update the Chrome browser some times it works, but sometimes it breaks down....
The above problem occurs when choosing a font size too, can the issue be that sometimes these things are executed before the iframe is loaded maybe?  I don't know.  
Here is all jquery:
    $('.color-box').colpick({
        colorScheme:'dark',
        layout:'rgbhex',
        color:'ff8800',
        submit: 0,
            onChange:function(hsb,hex,rgb,el,bySetColor) {
                $(el).css('background-color', '#'+hex);

                if(!bySetColor) $(el).val(hex);

                $("#preview-iframe").contents().find($(el).data('obj')).css($(el).data('objattr'), '#' + hex);
            }
    }).css('background-color', '#000000');

    var template_id = {{ $theme->template_id }};

    //Contents
    var content = {{ json_encode($template) }};
    $('#preview-iframe').contents().find('html').html(content);

    //Give default color
    $('.color-box').each(function(i, el){
        var color = $("#preview-iframe").contents().find($(el).data('obj')).css($(el).data('objattr'));
        $(el).css('background-color', color);

        console.log(color);
    });

    $('.fontsizepick').val(function() {
        return $("#preview-iframe").contents().find($(this).data('obj')).css('font-size').slice(0,-2);
    });

    $('.fontpick').change(function() {
        $("#preview-iframe").contents().find($(this).data('obj')).css('font-family', $(this).val());
    });

    $('.fontsizepick').change(function() {
        $("#preview-iframe").contents().find($(this).data('obj')).css('font-size', $(this).val() + 'px');
    });

    $(".fontpick option").filter(function() {
        console.log($("#preview-iframe").contents().find($(this).parent().data('obj')).css('font-family'));
        return $(this).text() === $("#preview-iframe").contents().find($(this).parent().data('obj')).css('font-family');
    }).prop('selected', true);

    //Selectize

    //$(".fontpick").selectize({});
   // $(".fontsizepick").selectize({});

Here is one form:
 <div class="row">    
                <div class="small-6 columns select-left">
                    <h5 class="text-muted">
                        Huvudrubrik
                    </h5>
                    <select name="menu_title[]" data-obj=".main-header" class="menu-title-choice fontpick">
                        <option value="Verdana">Verdana</option>
                        <option value="NeutraText-Book">NeutraText-Book</option>
                        <option value="Arial">Arial</option>
                    </select>
                </div>
                <div class="small-4 columns select-right">
                    <div style="height: 25px; margin-top: 3.200000047683716px; margin-bottom: 8px;"></div>
                        <select name="" data-obj=".main-header" class="fontsizepick">
                        @for ($i = 15; $i < 70; $i++)
                            <option value="{{ $i }}">{{ $i}}
                        @endfor
                        </select>
                </div>
                <div class="small-2 columns">
                    <div class="color-box" data-obj=".main-header" data-objattr="color"></div>
                </div>
            </div>

In Template that is loaded through iFrame. 
    <tr>
        <td colspan="4" class="header center">
            <span class="custom-color-1 main-header">MENY</span>
        </td>
    </tr>

And finally the CSS for main header:
.main-header {
    color: #000000;
    font-family: Arial;
    font-size: 1.5rem;
}

How can I get the right font size and family that I do "sometimes" with Chrome all the time, and also in Firefox, it works in the jsfiddle too.  

A:

The problem seems to be that you cannot retrieve CSS attributes from a Iframe when using a external CSS file. 
So If you move the CSS to be in the document itself, it works just fine.