Export draw.io to PDF or PNG changes used font

[Michael Möllney]

Dear draw.io developer.

I use text inside objects in draw.io.

While editing and while viewing the diagram in Confluence a nice readable font is used.

When exporting the diagram as pdf (from conflunece) or as png (from within draw.io) the font in the result is another one (thicker and not so nice to read anymore).

Is the rendereing done on the different platforms?

- Export to pdf or png on the linux (centos) backend, where confluence works on.

- While editing is done in the Firefox editor on a Windows 7 64 bit

[David Benson _draw_io_ · Accepted solution]

The exports are dependent on the server you run Confluence on, specifically which fonts are provided on that machine. The problem you have there is Windows has reasonable fonts, whereas, most default Linux distros don't. The Linux backend is trying to map from your browser fonts to the nearest font it feels should apply, and they are never quite as good.

There are a number of things that can be tried to improve the font handling. Installing certain fonts on the Linux server is one. Another option is to run the export as a stand-alone app on another Windows or OS X server, that give better fonts.

Another discussion we were having is whether Confluence users are willing to allow the image export to go externally to get a better result. On the draw.io web site we have a custom export server system. We're guessing anything going externally is bad, but haven't had any user feedback on it yet.

[Michael Möllney]

Thank you for your answers and comments.

Just to make it more clear to me: I simply have to install the same font, that I'm using on my Desktop-Browser in draw.io plugin, on my linux server. No additional setup is needed? That would be nice.

On the other side: The default font is named Helvetica in draw.io. Is this a free font now? It is not installed on my Windows 7 System in the Fonts setup. So how does draw.io has access to Helvetica?

Could you give a small guide, what fonts should be installed on the confluence server to have a nice looking export?

[David Benson _draw_io_]

If you add a font on your Linux server and refresh the font cache, the JVM should put that up, yes.

The font list in draw.io is simply a list of common fonts, it doesn't mean that those fonts are available in your browser (there's no way to reliably determine your system fonts in a browser). Helvetica isn't a free font, but it's available in Windows, OS X and iOS, which are, combined, the vast majority of OSes uses with draw.io.

You don't have to install the fonts we list on your server, you can also use the fonts that your server supports in the browser. At the bottom of the fonts list is "Custom...". If you insert, say, "Liberation Sans" in that dialog the export server will use, and being Linux most likely have, that font. The problem there is you probably don't have Liberation Sans on the browser...

The easiest win I've found in terms of Linux fonts is to install the Microsoft core fonts, e.g. on Ubuntu:

sudo apt-get install ttf-mscorefonts-installer

This gives you:

• Andale Mono
• Arial Black
• Arial (Bold, Italic, Bold Italic)
• Comic Sans MS (Bold)
• Courier New (Bold, Italic, Bold Italic)
• Georgia (Bold, Italic, Bold Italic)
• Impact
• Times New Roman (Bold, Italic, Bold Italic)
• Trebuchet (Bold, Italic, Bold Italic)
• Verdana (Bold, Italic, Bold Italic)
• Webdings

Arial, Times and Courier will cover most of the cases you need. Playing with the draw.io fonts interface, I can see we need some changes to retain a font as the new default when you change the current font. We also need some way to store a custom font list as the default for all users at the Confluence admin level, I'll add issues for those now.

[Michael Möllney]

Thank you again for this in-depth answer.

I will follow your advice and will see, if I find that package on centos, too.

I like you conseuqence thinking to setup a list of standard fonts in the Confluence admin level to be usable with draw.io plugin. Maybe there should be even an option to limit the user to these fonts and do not allow the users to use any other font he finds on his desktop system.

[Michael Möllney]

It finally worked out!

I installed the microsoft core fonts you mentioned in centos, fc-cache 'ed the fonts and restarted the confluence service (just in case... do not know, if this is needed...).

Thanks again for your support.

[hemanth acharya]

Hi, I did this on the linux server and we refreshed the cache as well, but it is still not reflecting. Is there anything else to do? @Michael Möllney @David Benson : could you please guide? Thanks

[hemanth acharya]

@David Benson The font is appearing but it is still bold, is there any other change required? Please suggest. thanks

[Mikkel Christensen]

I have this problem on a Confluence that runs on a Windows server. I have tested with Helvetica, Verdana, and Times New Roman. All of them appear to change to bold when exporting as PNG (it looks bad already in the Confluence text editor). I have verified that Verdana and Times New Roman are installed on the server. Helvetica is not, nor is it a standard Windows font. This is a serious problem because it screws up formatting of the diagrams, making PDF exports unusable.

[David Benson _draw_io_]

@Mikkel Christiansen We'll address the ticket you've submitted, we can't deal with individual issues as part of a thread here.

[David Benson _draw_io_]

Hi Andrea, would you mind starting a new question for this please? The thread is somewhat long and it's hard to address in one comment. Just reference this question in the new question, thanks.

[Andrea]

Thank you @David Benson [draw.io] for the fast reply, I've opened a new question here: https://answers.atlassian.com/questions/25690487/draw.io-graphs-fonts-messed-up-exporting-confluence-pages-to-pdf

[David Benson _draw_io_]

I would suggest upgrading to 5.2.0.0. We have client-side rendering of PNGs in Chrome and Firefox (IE still being worked on). We also offer the option of an external image generation, if that's possible under your company's privacy restrictions.