Custom Web Fonts and Icons in Power BI

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.

Custom Web Fonts in Power BI

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.

Power BI Custom Web Fonts

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>"
        }
    }
)

Custom Web Fonts in Power BI

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.

 



2 thoughts on “Custom Web Fonts and Icons in Power BI

  1. Pingback: Power BI Sudoku, Custom fonts, DAX and more... (June 25, 2018) | Guy in a Cube

Leave a Reply

Your email address will not be published. Required fields are marked *