Get file from @font-face

[ellescuba27]

I'm sorry if this is in the wrong forums section - it's been a while since I went here. Forums look much different now!
Anyhow, I was wondering if there was any way, through Javascript, to detect the files used in a CSS font-face. For example say I have this in an external file:
@font-face {
font-family: 'fp';
font-weight: normal;
font-style: normal;
src: url('fp.woff') format('woff');
}
How could I use Javascript to detect the font's name is fp.woff ? Any font face on the page? Is this even possible? Without a library/JQuery, preferably?

 

[descalzo]

https://www.google.com/search?q=jav...hrome.0.69i57.9385j0&sourceid=chrome&ie=UTF-8

might be a starting point

 

[ellescuba27]

Oh I've tried Google Search, but the results that come up are for feature detection - to find out if font-face actually works in the first place. I have that covered. A couple Stack Overflow results come up, but they are either A. JQuery or B. Doesn't actually work (on the latest Firefox)

 

[essellar]

jQuery is just JavaScript, so if it can be done in jQuery, it can be done in vanilla JS. If you can't find the magical incantations anywhere else, you can just follow the trail through the full-source jQuery file(s).

 

[ellescuba27]

NVM, I found why it was not working.
Apparently this cannot be done cross-domain as so many things in Javascript; I had the stylesheet on a separate subdomain.
This code from Stack Overflow works on a single domain

var pattern=/url\(.*?\)/g;
for (var i=0;i<document.styleSheets[0].cssRules.length;i++)
{
    var urls=document.styleSheets[0].cssRules[i].cssText.match(pattern);
    if (urls)
    {
        for (var j=0;j<urls.length;j++)
        {
            alert(urls[j]);
        }
    }
}

I suppose there is no way to work around that, then (if on a separate domain it errors with "The operation is insecure")
Source http://stackoverflow.com/questions/10248100/enumerate-font-face-urls-using-javascript-jquery