Fabric Data Days Monthly is back. Join us on March 26th for two expert-led sessions on 1) Getting Started with Fabric IQ and 2) Mapping & Spacial Analytics in Fabric. Register now
We all know that Power BI provides only a limited set of built-in fonts. To overcome this limitation, report developers often install custom fonts locally and modify the theme JSON file to use them.
However, this approach introduces a significant dependency: For report users to see the custom font correctly, the same font must also be installed on their device. Considering that report consumers may access reports from Windows, Mac, tablets, Power BI mobile app in Android, or iOS devices, maintaining such a dependency is not practical. In most real-world scenarios, this prevents developers from using custom fonts.
In this blog, I will explain a workaround that allows you to use any font in Power BI reports:
.ttf files to .woff2.woff2 files into Base64 stringsYou can download fonts from trusted sources such as, Google Fonts
Search for your desired font, open it and click on “Get font” button, it will add your font to the cart. Go to the cart then you will be able to download the fonts. I am downloading 5 fonts: Montseratt, Lato, Ralway, Inter and Roboto.
After unzipping, each font will have its own folder
containing multiple styles (Light, Bold, Italic, etc.) in .ttf format. Identify and list only the styles you actually need in your report.
Although .ttf files can technically be embedded, they are relatively large in size. To optimize performance, we will convert them to .woff2 format in the next step.
Open Tansfonter site
Upload the selected .ttf files using “Add fonts”.
Click Convert. Download and unzip the output.
Inside the extracted folder, you will find the .woff2 files.
We cannot directly upload these files into Power BI. So next, we convert them into Base64 strings.
Open Base64
Upload the .woff2 file. Click Encode file to Base64.
Download the generated Base64 string. Save each Base64 string locally. Note: Files must be converted one by one.
Create a new measure in Power BI and paste the Base64 string:
Repeat this for each font style you want to use.
Instead of rewriting the SVG structure repeatedly, centralize it using a DAX User-Defined Function (UDF):
DEFINE
FUNCTION applyFont = (tex: string, font: string, fontName:string, alignment:string) =>
VAR __Result =
"data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='30'>
<style>
-face {
font-family:'"&fontName&"';
src: url('data:font/woff2;base64,"
& font &
"') format('woff2');
}
text {
font-family: '"&fontName&"';
font-size: 14px;
fill: black;
text-anchor: "&alignment&";
}
</style>
<text x='50%' y='50%' dominant-baseline='middle'>"
& tex &
"</text>
</svg>"
RETURN
__Result
Apply to a Calculated Column
CountrywithFont =
applyFont(financials[Country], [fontMontserrat], "Montserrat", "middle")
Set the column’s Data Category to Image URL.
Apply to a Measure
CountryWithLatoFont =
Var __SelectedCountry = SELECTEDVALUE(financials[Country])
Var __Result = applyFont(__SelectedCountry, [fontLato], "Lato","middle")
RETURN __Result
Also categorize the measure as Image URL.
When placed in a table visual, the custom fonts render correctly.
Similarly when I place all the fonts I apply all the fonts to Country column and place them in one visual, it looks like this
I created this report on a Windows machine, published it to power bi service, Then I opened it on a Mac device that did not have these fonts installed. The report rendered exactly the same as it did in Power BI Desktop. This confirms that the font is embedded inside the SVG, eliminating machine-level dependency.
This workaround is powerful, but it is not suitable for every scenario. I am sharing this purely for knowledge-sharing purposes. Please validate thoroughly before implementing in production environments.
Hope you learned something new. Please share your thoughts using the comments section below.
Happy Learning!!!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.