Adding Web Fonts to Tableau Server

Note: this is unsupported and adds things to the Tableau Server files, which also means you need to have a process to put it back in place with every upgrade. See CSS magic tricks with Embedded Tableau Server views and Disabling Browser and Apache Caching to See Your Changes to Tableau Server  which outline the necessary steps to make these types of CSS edits work.

You’ve got great design standards and awesome fonts, but you publish a beautiful viz to your Tableau Server and your end users end up seeing the default sans-serif or serif fonts that you’ve worked so hard to overcome. Tableau Server doesn’t have any in-built functionality for Web Fonts, but since it is just standard Apache serving up regular HTML5, JavaScript and CSS, you can easily add in anything you  want your users to have access to.

The secret is appending your web font CSS to vqlweb.css. I’ve already discussed how to edit the vqlweb.css file in the previous post mentioned in the warning at the top, and all the same rules apply. To get your font to display, you just need to add the appropriate Web Font css at the end. For example, Jeremy here built a kicking-rad viz with ‘Outrun future’.

Here’s the CSS I added to vqlweb.css:

@font-face {font-family: 'Outrun future';src: url("Outrun future.otf") format("opentype");}

The only other thing I had to do was copy the font file ‘Outrun future.otf’ to the /css/ directory (the same place where vqlweb.css lives).

Now go and add all the Web Fonts your heart desires (but make sure you can replicate your setup on each upgrade!)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s