Some particularities with using fonts and PDF export

Sometimes you get squares in the PDF documents that you got with our product.
You have got the issue because browsers can replace missed fonts with available fonts.
It's even possible to set a sequence of fonts that browser should look for.
In PDF format it works completely different because the PDF is fixed layout format. That's why it is so popular.
It guarantees that you will get exactly the same result as you need. On any machine and on any printer.
A PDF reader doesn't look for any available font. It shows exactly what you have specified.
And if there is no necessary font or symbol the square is shown instead of the missed font.

To avoid this issue you should be sure that you use the fonts that are available on all machines where the PDF file will be opened.
If you are not sure, you could add the used fonts to the PDF file. It will be significantly larger but this guaranty that you get the expected result.
There is a font compression algorithm that reduces size of the PDF file.

But there is one more issue. JavaScript have no access to the local files from the browser. So the whole font file should be uploaded. You could use next code to load the necessary fonts.

Stimulsoft.Base.StiFontCollection.addOpentypeFontFile("data/arial.ttf", "Arial");
Stimulsoft.Base.StiFontCollection.addOpentypeFontFile("data/arialuni.TTF", "Arial Unicode MS");
Stimulsoft.Base.StiFontCollection.addOpentypeFontFile("data/simsunb.ttf", "SimSun-ExtB");

The async method for MacOS was added in the 2017.1.8 buld:

static addOpentypeFontFileAsync(callback: Function, filePath: string, fontName: string = null)

You could add Bold, Italic and other fonts with this code:

Stimulsoft.Base.StiFontCollection.addOpentypeFontFile("calibri.ttf", "Calibri");
Stimulsoft.Base.StiFontCollection.addOpentypeFontFile("calibrib.ttf", "Calibri", Stimulsoft.System.Drawing.FontStyle.Bold);
Stimulsoft.Base.StiFontCollection.addOpentypeFontFile("calibrii.ttf", "Calibri", Stimulsoft.System.Drawing.FontStyle.Italic);
Stimulsoft.Base.StiFontCollection.addOpentypeFontFile("calibribi.ttf", "Calibri", Stimulsoft.System.Drawing.FontStyle.Bold + Stimulsoft.System.Drawing.FontStyle.Italic);

Update 2020.1.2:

  • It's possible to load necessary font files from a folder. It's working in node.js only.


  • If you don't want to see all available fonts in the Designer and want to see fonts from available font files you could

    - set the ShowSystemFonts property of the Designer in Reports.Web or
    - options.appearance.showSystemFonts = false; in Reports.JS.

    This option removes all systems fonts and shows fonts that are added to resources or loaded into StiFontCollection.


Please sign in to leave a comment.