'how can i fix pagespeed score when base64 font is treated as unused css

I embedded the font file directly into my css file in fontface as base64. Besides the font, I have about 150 css lines there.

The pagespeed claims 60.5 KiB of 60.9 KiB is not used (gtmetrix too, but 59.8 of 60.4). Placing the font in html in style tag (as i planned at the beginning) does not change the situation.

I believe that because of this one problem, my result drops from 99-100 to 90. Removing the font and duplicating all styles until the file size is the same proves it. Interestingly, all these duplicates are not considered unused. What should I do?

Minimum reproducible example (paste real base64 in fontface src):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font test</title>
    <style>
        @font-face {
            font-family: 'b64';
            font-weight: bold;
            src: url("data:application/octet-stream;base64,AAEAA [...rest of font file]");
        }
        body {
            font-family: "b64";
            font-weight: bold;
        }
    </style>
</head>

<body>
    font test
</body>
</html>
cssfontsbase64pagespeed


Solution 1:[1]

Try to set the MIME Type to one of this: ont/otf
application/font-otf
application/font
application/otf
application/x-font-otf

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 aWebDesigner123

Related Questions