I am using dataTables to render a table of best times for a swim team. There are two levels of qualifying times in the applicable universe, and I am annotating times in the table with unicode star glyphs. Outline for level B, and solid for level A. U+2606 and U+2605, respectively. The browser view is as expected:
However, when I export to PDF, the glyphs don’t render.
What I’ve read says this is an issue with the fact that Roboto, the default font in pdfMake doesn’t support the glyph, and that to include other fonts I would have to edit the vfs_fonts.js file and include the base-64 encoded definitions of the font I want to include. That presents its own challenge in that you need the redistribution license for a given font. I have found it rather difficult to confirm whether a given font has the glyph I need, and my attempt to use a free font I found produced strange errors.
$.ajax({
url: '/ttf/FreeSans-LrmZ.ttf' ,
success: function(result) {
window.pdfMake.vfs["FreeSans.ttf"] = btoa(unescape(encodeURIComponent(result))) ;
}
});
....
customize: function (doc) {
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
},
freeSans: {
normal: 'FreeSans.ttf',
}
};
doc.defaultStyle.font = "freeSans";
....
embedded.js:15 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'advanceWidth')
I suppose that I really have two questions: 1) How do I find an appropriate font to correctly render the two unicode characters that I need? 2) How do I properly incorporate it so that I can resolve my js error and successfully export the correctly rendered PDF?
I have referenced the following questions and was unable to solve my problem:
Cannot use special characters/glyphs with PDFMAKE, even with imported Fonts which include those