Recently, I've noticed an odd alteration in the appearance of a font when it's encoded as base64.
To enhance my website's performance, I've been focusing on storing web fonts as base64 data in localStorage following a method similar to what Smashing Magazine suggests. The JavaScript implementation is pretty simple. However, after converting the woff font data to base64, the rendering of the font in my headings seems different.
This is how the binary font appears:
And this is the result with base64 encoding:
The HTML structure remains identical in both cases:
<h3 class="title">
<a href="http://domain.co.uk/sarah-palin-923489/"><span>What happens after Sarah Palin's teleprompter breaks is hardly surprising</span></a>
</h3>
and the CSS styles are consistent as well:
.title {
font-size: 26px;
line-height: 1.2;
position: relative;
z-index: 2;
font-family: ScoutBold, Arial, Helvetica, sans-serif;
font-weight: normal;
}
span {
color: white;
background-color: rgba(126, 211, 33, 0.8);
box-shadow: 10px 0 0 rgba(126, 211, 33, 0.8), -10px 0 0 rgba(126, 211, 33, 0.8);
}
When examining the scout-light.woff font file, it includes binary data like the following:
774f 4646 0001 0000 0000 7856 0011 0000
0001 1564 0001 0000 0000 76a0 0000 01b6
0000 02f9 0000 0000 0000 0000 4750 4f53
0000 65d0 0000 0da6 0000 47f2 b51f 87a4
After uploading the woff file and pasting its content into my font CSS along these lines:
@font-face {
font-family: ScoutLight;
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAGKIABMAAAAA70AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcak+p20dERUYAAAHEAAAAMgAAADgCIAEQR1BPUwAAAfgAAA3LAABSqL7EBrtHU1VCAAAPxAAAAJIAAAEmGQ8brU9TLzIAABBYAAAA... mCGKVBUG8hLUWlnoKDzARBPFyOqu7sZs3/ye8zwgX1qK/7nqAq+wbV3RzzGSL5YaCo5yhK7YdQ17VyMUS46p+MW4zZomvI+XYSoxD5Qj2xoFyCJGxX9X34KHhEfybhkvwThqOGnP/Z2wqOjuNhMAnPwCm+rMRZVNhiZ43B2KmNqQwZUMmp4ZsNbAg5ouBY2LhGUosxQdf6EtzAAABVCFFcAAA) format("woff"), url("../fonts/scout-light/scout-light.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
I assumed the encoded data would closely match the unencoded data. Yet, that slight difference alters the way the font renders. Any ideas why this discrepancy occurs when the only change was in the font data encoding? Should I try using a different encoding approach?
You can view an example of the base64 version here.
//////////////////////////// EDIT ////////////////////////////
Upon further investigation, I've confirmed that encoding a font as base64 does lead to some loss in quality. Customers have complained about single quotes appearing too high above the baseline now. It seems I may need to abandon the idea of storing fonts locally.
Observe what happens to the ' before "This" in this scenario. The encoding distorts it.