A past post discussed different fonts available for use in Power BI, and I have also showed how to try to expand your font selection with Themes. What if users want more variety? It’s possible to add additional custom fonts using the powerful HTML Viewer custom visual. You might take advantage of this method for a more versatile textbox by adding almost any styling you want, including free fonts or icons hosted on the web.
In the following example, I show you how to add custom Google Fonts and combine them with an icon from the Microsoft Office UI Fabric. The primary disadvantage is that the fonts and icons are limited to a single visual and not available for formatting other visuals. On the other hand, advantages of using the HTML Viewer for a custom textbox is greater control over the output including positioning and style, the ability to easily combine text with images, and the quality remains constant regardless of how large or small you scale an image in the HTML Viewer.
Google Fonts
On the Modeling tab, select New Table and enter the following DAX. The DATATABLE function creates a new disconnected table with the custom HTML in a field for later use in the HTML Viewer. The head contains the link to two free fonts from Google called Gaegu and Uncial Antiqua, which are pipe-separated. The body contains the text elements with inline CSS styling. I tried using CSS with <style> tags in <head>, and while some styling worked, the fonts did not work in Power BI. I intentionally chose outlandish fonts to stand out (with Gaegu in particular rivaling Comic Sans for the crown of Font to Avoid on a Real Report), but there are hundreds of others available on the Google Fonts site.
Google Fonts = DATATABLE (
"HTML Text", STRING, {
{
"<head>
<link href='https://fonts.googleapis.com/css?family=Gaegu|Uncial Antiqua' rel='stylesheet'>
</head>
<body>
<p style='font-family:Uncial Antiqua;color:#017CBA;font-size:72px;text-align:center;margin:0;'>Custom web fonts in </p>
<p style='font-family:Gaegu;color:#E78E46;font-size:96px;text-align:center;margin:0;'>Power BI</p>
</body>"
}
}
)When you add the field to an instance of the HTML Viewer custom visual, the output appears like so.
Microsoft Office UI Fabric
Going a step further, the Microsoft Office UI Fabric is a framework for styling an application or site like MS Office. In this case, I’ll use a small piece of the Fabric capabilities to add a Power BI logo icon that will scale with good quality regardless of how large I make the image.
On the Modeling tab, select New Table and enter the following DAX.
Microsoft Office UI Fabric = DATATABLE (
"HTML Text", STRING, {
{
"<head>
<link href='https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css' rel='stylesheet'>
</head>
<body>
<i class='ms-Icon ms-Icon--PowerBILogo' style='font-size:96px;color:#443322;transform:translate(10px,30px);' aria-hidden='true'></i>
</body>"
}
}
)Adding this new field to the HTML Viewer visual shows the Power BI logo.
Combine the Two
It’s possible to combine both as well. After all, flexibility is one of the main strengths of the HTML Viewer.
Combined = DATATABLE (
"HTML Text", STRING, {
{
"<head>
<link href='https://fonts.googleapis.com/css?family=Gaegu|Uncial Antiqua' rel='stylesheet'>
<link href='https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css' rel='stylesheet'>
</head>
<body>
<p style='font-family:Uncial Antiqua;color:#017CBA;font-size:72px;text-align:center;margin:0;'>Custom web fonts in </p>
<p style='font-family:Gaegu;color:#E78E46;font-size:96px;text-align:center;margin:0;'>Power BI</p>
<i class='ms-Icon ms-Icon--PowerBILogo' style='font-size:96px;color:#443322; display:inline-block;width:100%;text-align:center;transform:translate(0px,40px);' aria-hidden='true'></i>
</body>"
}
}
)
While this has some very obvious limitations and won’t bring custom fonts to all of your visuals, it could provide some unique experiences with titles, images, and more. I’m curious to see if anyone takes advantage of this method for custom web fonts and icons in Power BI.
Aha. Nice trick. Thanks!
Hi,
Great post, thanks! Is there any way to have it display the icon in a cell in the standard Table visualization? I’ve got a couple of “Microsoft Office UI Fabric” icons I want to switch between depending on an IF condition.
Thank you
You can add SVG to the standard Table visual. If you can get the icons as SVG, you could create a measure using DAX to switch between them. https://dataveld.com/2018/07/16/use-svg-images-in-power-bi-part-3/
Hi,
Can i setup google font in power bi cloud?
Thank you
If you build the report in Desktop and publish to the Service / cloud, the Google font should still work.