I was browsing a German website when I noticed that during the initial page load there were some non printable characters displayed on the page (like ``). As a result the score of the match can't be seen while the page is still fetching all resources, especially fonts. I simulated this behavior by disabling a specific CSS rule.

The page adds a data-obfuscation attribute and a class to each element displaying a score.

The CSS Rule I disabled to simulate the page load sets the font-family on the target elements. The font seems to have the same name as the value of the data-obfuscation attribute which seems to be shared for all effected elements. The value also changes when I reload the page.

.results-c-7kwd95ci {
    font-family: font-7kwd95ci !important;
}

If I enable this rule the score can be viewed normally

Here is the CSS File

@font-face {
    font-family: font-7kwd95ci;
    src: 
        url('//www.fussball.de/export.fontface/-/format/woff/id/7kwd95ci/type/font') format('woff'),
        url('//www.fussball.de/export.fontface/-/format/ttf/id/7kwd95ci/type/font') format('truetype');
}

.results-c-7kwd95ci {
    font-family: font-7kwd95ci !important;
}

Seems like the site is intentionally sending malformed unicode data which can only be rendered by the loaded font. Since copying the score to the clipboard also just copies the malformed data.

Is there a name for this kind of obfuscation and how does it work? Can this be circumvented when scraping data without browser automation? Technically also browser automation does not work for scraping since the data is still malformed.