Menu
Is there a way of enumerating all the @font-face URLs (web font URLs) of a given HTML page using JavaScript or JQuery?
755
Yes, assuming you mean you want to find all the @font-faces specified in the stylesheet as opposed to actually USED in the HTML document itself.
Given a reasonably standard stylesheet that looks like this:
@font-face {
font-family: 'Lobster12Regular';
src: url('fonts/lobster_1.2-webfont.eot');
src: url('fonts/lobster_1.2-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/lobster_1.2-webfont.woff') format('woff'),
url('fonts/lobster_1.2-webfont.ttf') format('truetype'),
url('fonts/lobster_1.2-webfont.svg#Lobster12Regular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AllerRegular';
src: url('fonts/aller_std_rg-webfont.eot');
src: url('fonts/aller_std_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/aller_std_rg-webfont.woff') format('woff'),
url('fonts/aller_std_rg-webfont.ttf') format('truetype'),
url('fonts/aller_std_rg-webfont.svg#AllerRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AllerBold';
src: url('fonts/aller_std_bd-webfont.eot');
src: url('fonts/aller_std_bd-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/aller_std_bd-webfont.woff') format('woff'),
url('fonts/aller_std_bd-webfont.ttf') format('truetype'),
url('fonts/aller_std_bd-webfont.svg#AllerBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AllerLight';
src: url('fonts/aller_std_lt-webfont.eot');
src: url('fonts/aller_std_lt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/aller_std_lt-webfont.woff') format('woff'),
url('fonts/aller_std_lt-webfont.ttf') format('truetype'),
url('fonts/aller_std_lt-webfont.svg#AllerLight') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'Lobster12Regular';
}
h2 {
font-family: 'AllerRegular';
}
Then the following HTML (with inlined Javascript) will more or less do the trick:
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>Hello</h1>
<h2>Hello</h2>
<script type="text/javascript">
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]);
}
}
}
</script>
</body>
</html>
With some caveats:
Firstly, one of main ways to specify @font-face relies on specifying the src twice, this technique will only pick up the second src.
I've not tested this cross-browser but it works on my browser and pops up an alert box with each font url.
The hard coded [0] makes it only look at the first stylesheet (in this example there is only one). It's reasonably trivial to write yet another loop to loop over all stylesheets if required but seemed like overkill for this example.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
