Getting url of @font_face tag in CSS using javascript

Question

Currently I have a lot of @font_face tags in my CSS

@font-face{
        font-family: Garamond;
        src: url('ePrintFonts/pcl_91545.ttf');
    }
    @font-face{
        font-family: CG Times;
        src: url('ePrintFonts/pcl_92500_CG.ttf');
    }
    @font-face{
        font-family: CG Omega;
        src: url('ePrintFonts/pcl_92506.ttf');
    }

I'm applying these font face tags using their font-family name to other elements. How can I access the src portion of the particular font with JavaScript if I'm given a particular element that has the font face applied to it?

check the font family of the element you are selecting, You can use the [computed style](http://stackoverflow.com/questions/6134471/using-elements-that-are-added-to-an-array-with-document-getelementbyidid/6134501#6134501) — Ibu, Jul 17 '13 at 22:04
http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element — vipulsharma, Jul 18 '13 at 05:58

score 0 · Accepted Answer · answered Jul 19 '13 at 09:39

Whilst both of the comments to your question provide links which show ways in which you can retrieve all applied rules for a given element, they cannot show you what is asked in the question.

I'm not sure there's a way of doing what you're asking using some simple JS. My (probably poor) suggestion would be to find something to parse the CSS file, and find it through that. It's worth noting however, that it's perfectly valid to have a rule such as:

src: local('Open Sans Bold'), local('OpenSans-Bold'), url('fonts/opensans-bold.woff') format('woff');

Whereby you first search for Local installations of the font and only use a URL if the user doesn't have them. For that reason this type of thing is even more complicated, and I've advise that you rethink your approach.

Getting url of @font_face tag in CSS using javascript

1 Answers1