CSS Overrides - Customisable PBI report canvas for embedding

[BITomS]

Hi all,

We have an issue where our Power BI reports, embedded into our SaaS product, are loved by our clients, but our executive leadership are concerned about the alignment of the branding that is achievable in PBI to our own brand guidelines i.e. it doesn't have the "look and feel" they want. Whilst this might seem minor because clients are able to get the value they need, it is understandable to want a cohesive looking product.

I have been researching if there is a way to bring in more customisation of branding e.g: font types seem limited to a handful of options and even if we used our chosen font, when end users view any embedded report, unless they have the font style installed locally, they will not see the intended branding. However, it seems things like CSS override are only available via an app, and even then it is limited to anything outside the iframe.

Does anyone know of a way to align design of a PBI report within the iframe? Even some workarounds would be greatly appreciated. I know PBI has a fair amount of customisation, but based on what I have researched so far, it may not go far enough.

Many thanks!

[DataNinja777 · Accepted solution]

Hi @BITomS ,

You're correct, it's not possible to directly apply custom CSS to override styles within the Power BI iframe. For security and stability, the report canvas is a sandboxed environment that blocks external stylesheets from modifying its content. Your CSS can only affect the elements of your application that are outside of the iframe.

The most powerful tool at your disposal is creating a custom theme using a JSON file. This method offers granular control over the look and feel, allowing you to get much closer to your brand guidelines than the standard UI options permit. You can define exact brand colors, font families and sizes, and default properties for all your visuals, ensuring a consistent appearance across all reports.

{
  "name": "YourBrandTheme",
  "dataColors": ["#1A2B3C", "#D4E5F6", "#778899"],
  "visualStyles": {
    "allVisuals": {
      "*": {
        "title": [{
          "fontFamily": "Segoe UI",
          "fontSize": 16,
          "color": { "solid": { "color": "#1A2B3C" } },
          "background": { "solid": { "color": "#FFFFFF" } },
          "show": true
        }],
        "background": [{
          "show": false
        }]
      }
    }
  },
  "page": {
    "background": [{
      "color": { "solid": { "color": "#FFFFFF" } },
      "transparency": 0
    }]
  }
}

Regarding your specific concern about fonts, you've identified a key limitation. Even when a custom font is specified in your theme, it will only render if the end-user has that font installed locally. The most reliable workaround is to select a primary font from your brand guidelines that is also web-safe (like Arial or Verdana) or a very common Google Font that is likely to be cached on a user's system. For critical, static text elements like a main report title where brand fidelity is non-negotiable, you could use a high-quality SVG image of the text instead.

To achieve a truly cohesive look, focus on the experience around the iframe. Use the Power BI JavaScript SDK to hide the default Power BI UI elements like the filter pane and page navigation, and then build your own navigation and filtering controls within your application's native interface. These custom controls can then interact with the embedded report via the client-side API. This approach, combined with a detailed JSON theme, will make the embedded report feel like a seamless, integrated part of your SaaS product.

Best regards,

[BITomS]

@DataNinja777 thanks very much for that comprehensive response!

The font issue seems to be a sticking point, although I guess this is the result of choosing such a niche style. I know that Metabase is also being looked at, but the PBI Javascript SDK is something I think we should investgate further, so thanks again for this nugget of info!