Export draw.io to PDF or PNG changes used font

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

2 answers

1 accepted

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.

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?

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.

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.

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.

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

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

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.

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

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.

I would suggest upgrading to 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.

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Published 14 hours ago in Confluence

Think you know shares vs. @mentions in Confluence? Take this collab quiz.

To anyone who doubts that Atlassians are a little too obsessed with collaboration, and tools related thereto, let me describe a recent discussion we had (which took place on our internal Confluence, ...

99 views 2 4
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you