3 of 3 people found this helpful
Font normalization on the web can be difficult, in Tableau or not. When I publish a Viz to TS I have used the Tableau Book fonts as well as Lucida, etc, and run in to the same issue occasionally. In general, CSS font declarations are done like this:
font-family: "Tableau Book",'Tableau',Arial,sans-serif;
This provides a cascading set of font that the browser can fall back through. The fact that you end up with a serif font when selecting a sans-serif font in Tableau suggests to me that perhaps a serif font was selected as a dashboard default and then over ridden with a specific style.
When looking at your viz on Tableau Server you can inspect an element to see what it's font definition is by (in general) using Ctrl + Shift + i. In all modern browsers there is an element select feature, which typically looks like a cursor on an outline. If you click a title/element that has been reported to have this issue then you can see what your definition looks like.
I just tested using a custom font on Firefox, IE 11, and MS Edge with success. I'm on Tableau Server 2019.3. BTW, an interesting note... as of 2019.3, TS created a <div> element at the end of the HTML that uses a non-standard font and then attempts to over ride it to test the ability of the browser to use a custom font. You might check to see if your viz has this:
<div class="TestFontContainer" style="top: 0px; right: 0px; font-family: TableauTestFont; visibility: hidden; position: absolute; z-index: -1;">A</div>
So server itself is designed to account for this issue, at least through 2019.x, so I would suggest looking at how it comes out in the HTML/CSS and report back. If you can get on a user's computer to do this test it would be even more helpful.
Thank you, Graham for such a great write up. Superbly done!!