3

For the purpose of Javascript based automated unused CSS removal we are looking for a solution to detect if a @font-face block is used on a page.

Is there an easy way to verify if a font is in use in the HTML?

The method getComputedStyle() would require to test each individual HTML element and would not be efficient.

<style>@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}</style>
<html> ... </html>
<script>function test_if_open_sans_is_used() { return; }</script>
0

3 Answers 3

3

document.fonts.check API can be used to detect font-usage. It depends on a font-string style weight size font-family.

To match Open-Sans-Italic:

document.fonts.check('italic 14px "Open Sans"');
3

This will help determine all fonts used on a given webpage. You can then use this to determine if your target font has been used.

const fontUnstack = (stack, size, style, weight) => {
    if (typeof stack === "string")
        stack = stack.match(/[^'",;\s][^'",;]*/g) || [];

    for (const family of stack) {
        if (document.fonts.check(style + ' ' + weight + ' ' + size + ' ' + family))
            return family;
    }
    console.log('undetected font', fontStyle, fontWeight, fontSize, fontFamily, el);
    return null;
};

const els = document.querySelectorAll('*');
let fonts = {};

for (const el of els) {
    const computedStyles = [
        window.getComputedStyle(el),
        window.getComputedStyle(el, '::before'),
        window.getComputedStyle(el, '::after')
    ];
    for (const computedStyle of computedStyles) {
        const fontFamily = computedStyle.getPropertyValue('font-family'),
              fontSize = computedStyle.getPropertyValue('font-size'),
              fontStyle = computedStyle.getPropertyValue('font-style'),
              fontWeight = computedStyle.getPropertyValue('font-weight'),
              usedFontFamily = fontUnstack(fontFamily, fontSize, fontStyle, fontWeight);

        if (usedFontFamily && !fonts.hasOwnProperty(usedFontFamily))
            fonts[usedFontFamily] = [];
        if (fonts[usedFontFamily].indexOf(fontStyle + ', ' + fontWeight) === -1)
            fonts[usedFontFamily].push(fontStyle + ', ' + fontWeight);
    }
}

console.log(fonts);
2
  • Thank you for the suggestion! A few notes: 1) it doesn't seem to be reliable (it tests for a <span> width change to detect whether a font is used, some fonts may have the same width as the baseline font) 2) it doesn't discover 'unused' fonts outside the scope of a whole HTML document (i.e. a viewport): it will trigger a font-download for @font-face 3) it is slow: it requires to test each individual HTML element Why wouldn't you use document.fonts.check instead of the <span> method? Jul 4, 2020 at 8:42
  • Thanks for the input @optimalisatie. So I did edit my response to reflect the document.fonts.check. I had not originally used it for compatibility reasons but it seems to be working in the browsers I was able to test. That being said, this code is intended to be used by a developer in the developer panel of the browser to determine the fonts used in a give page. Not intended to be used in your JS and I can't think of a use case that needing to obtain this info every time a page is run. Jul 4, 2020 at 15:54
1

There is no API you can use or CSS selector for computed styles. (Old example with jQuery) The only options you have is to iterate over the entire DOM, or simply use the Chrome css coverage

If you want to automate your solution you can always extend Chrome Dev tools

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.