JSFiddle - React, Tailwind, and code Playground

HTML

<p>This is a test</p>

CSS

p {
    color: rgb(102, 102, 102) ;
    font-family: "Dosis" ;
    font-size: 14px ;
    font-weight: 400 ;
    line-height: 21px ;
    text-align: left ;
    text-decoration: none ;
}
@font-face {
    font-family: "Dosis";
    font-style: normal;
    font-weight: 700;
    src: local("Dosis Bold"), local("Dosis-Bold"), url("http://fonts.gstatic.com/s/dosis/v4/Luunk03-uSz9LnB7oNEUuvesZW2xOQ-xsNqO47m55DA.ttf") format("truetype");
}
@font-face {
    font-family: "Dosis";
    font-style: normal;
    font-weight: 400;
    src: local("Dosis Regular"), local("Dosis-Regular"), url("http://fonts.gstatic.com/s/dosis/v4/guC5lwT5Dw7anV_xfpCGqw.ttf") format("truetype");
}
@font-face {
    font-family: "Dosis";
    font-style: normal;
    font-weight: 300;
    src: local("Dosis Light"), local("Dosis-Light"), url("http://fonts.gstatic.com/s/dosis/v4/0b3R8ORT0i9mlMGM3BxXF_esZW2xOQ-xsNqO47m55DA.ttf") format("truetype");
}
@font-face {
    font-family: "Dosis";
    font-style: normal;
    font-weight: 200;
    src: local("Dosis ExtraLight"), local("Dosis-ExtraLight"), url("http://fonts.gstatic.com/s/dosis/v4/05xr33FHwecUTIADg28rEfesZW2xOQ-xsNqO47m55DA.ttf") format("truetype");
}

JavaScript

function getFonts (obj, doc) {
    // Maakt een lijst met de css van alle @font-face items.
    var o = obj || {},
    sheets = doc.styleSheets,
    rule = null,
    i = sheets.length, j;

    while( 0 <= --i ){
        rules = sheets[i].cssRules || sheets[i].rules || [];
        j = rules.length;
        
        while( 0 <= --j ){
            // Alternatives for the if below:
            // - if ( rule[j].style.cssText && rule[j].style.cssText.match('src:') )
            // - (worked only in Chrome): if ( rule[j].constructor.name === 'CSSFontFaceRule' )
            // IE just gives NO [object CSSFontFaceRule] !!!
            if( rules[j].toString() == "[object CSSFontFaceRule]" ) {
                console.log(rules)
                console.log('here')
                // rule.style.fontFamily works in Chrome chrome; Not in FF. For IE I don't know yet.
                fontFamily = rules[j].style.fontFamily || rules[j].style.cssText.match(/font-family\s*:\s*([^;\}]*)\s*[;}]/i)[1]

                // To prevent duplicates we use the cssText as key 
                o[ fontFamily ] = o[ fontFamily ] || {} ;
                o[ fontFamily ][rules[j].style.cssText] = rules[j].style.cssText ;
            }
        }
    }
    return o;
}

console.log(getFonts(null, document));