Get file from @font-face

ellescuba27

Member
Messages
273
Reaction score
3
Points
18
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?
 

ellescuba27

Member
Messages
273
Reaction score
3
Points
18
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

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
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

Member
Messages
273
Reaction score
3
Points
18
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
Code:
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
 
Top