Question

I need to sniff the formatting for a <p> so I can pass the info to an <iframe> and match formats.

I can get the font face using jQuery

var font = $("p").css('font-family');
var fsiz = $("p").css('font-size');

However if the font-family is a web font – eg “Open Sans” I also need to find the src for the @font-face rule that loaded it.

I have no idea how to do that.

Answer 1

Find all css-defined fonts, demo here (console).

function getFonts (obj) {
    var o = obj || {},
        sheet = document.styleSheets,
        rule = null,
        i = sheet.length, j;
    while( 0 <= --i ){
        rule = sheet[i].rules || sheet[i].cssRules || [];
        j = rule.length;
        while( 0 <= --j ){
            if( rule[j].constructor.name === 'CSSFontFaceRule' ){ // rule[j].slice(0, 10).toLowerCase() === '@font-face'
                o[ rule[j].style.fontFamily ] = rule[j].style.src;
            };
        }
    }
    return o;
}