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!)

4 comments

  1. what if I want to use two diff fonts on a same viz,

    making changes in css file for font,it will be only one for a whole viz.

    let me explain my question:
    i want to show title with font1 and content with font2

    how can we achieve that

    Like

    Reply

    1. Hi Anil,
      This post is merely about adding the font into the web server so that it will actually be sent across to the client web browser. The choices for which fonts are used in different places are all controlled within Tableau Desktop. You can set defaults at the workbook level (http://onlinehelp.tableau.com/current/pro/desktop/en-us/formatting_workbook.html) or format pieces of content individually (http://onlinehelp.tableau.com/current/pro/desktop/en-us/formatting_specific_titlecaption.html )

      Like

      Reply

      1. Thanks for the quick reply.

        Let me describe first why I asked thay question.

        I am using two fonts one for title and other for content
        And these two are not websafe fonts
        And by default are not available in tableau desktop’s font family

        So I installed that font in my system then I am able to see those font in my Tableau desktop

        But when I publish the report to Tableau server and when different users see that report in their browser, they see different fonts because they dont have it installed in their machine.

        So what solution you have provided in this blog by editing or making changes in css file might cater this problem.
        But for this we have to do
        1) place that font’s file into the tableau server directory so that report on Tableau server will use that font properly
        2) so that this css which you mentioned in your blog will pickup that font after making changes in its fontfamily value

        So can u help me with these below point
        -where i have to save fonts ttf/otf file so that this css will use it

        Like

  2. Pingback: Embedding with Tableau Online – 2020 Edition | Tableau and Behold!

Leave a comment