CSS Overrides - Customisable PBI report canvas for embedding

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,