Using custom fonts in Power Apps

Leave a Reply

Comment as a guest.

  1. I appreciate you have found a way to use other fonts, but I’m still confused on how to actually get these loaded. I very little knowledge of html. Could you provided step by step instructions, please on how to do this?

    Are you we supposed to insert an image control so the fonts will work? I’m confused. And I downloaded your PowerFontPCF, and it does not work.

    1. Hi,

      Well it depends, when using the SVG version, you need to use the image control because the SVG format is the one that is doing the rendering of the previously formatted ( in base64 ) font.

      When using the PCF version, first you need to enable PCF controls for your canvas apps:

      Using this method, the fonts will be downloaded as a regular webpage would do.

      Hope it helps

  2. I can get the custom font to work, but I’m unable to change the text color. I’ve tried adding it to the .custom class in your example, and as an inline style tag with no luck. How did you manage to get Powerapps in red?

    1. Hey Dan,

      You can use the same class adding the color property there or use another class in conjunction to set different colors for different texts.

      .Glory { font: 128px Gloria Hallelujah }
      .Colored { fill: red }

      Power Platform
      España - Canarias

      In this example, the Colored tag is setting the color to red.

      1. Ah, I was using color not fill!

        Another q- Is it possible to use dynamic data for the text here? I’m trying to put it together with concatenate, but having all sorts of issues due to the various special characters I’m assuming, gets messy trying to escape things.

  3. I appreciate your article and thanks for sharing the knowledge.
    I know the local font options you explain with its limitation.
    I wanted to know what are the limitations of both the SVG font and PCF font approach .
    Do we have to apply the custom font only as a component, can we directly apply it to controls like dropdown and textbox controls using SVG and PCF Components.

    1. Hey,

      You can always use the SVG approach using just an HTML control in Power Apps, having this on a component just makes it easier to replicate all over the app. Sometimes you need more than one font and using the Google Fonts CDN makes it easier to get the font you want without having to transform it. That’s when the PCF approach comes in handy.

      1. Thanks for your reply Eickhel.
        My requirement is to apply custom font to any inbuilt canvas app control commonly used like label, textbox and dropdown.
        So you mean to say that SVG works only with HTML Control and not other controls like Input, dropdown, label in canvas app, right ?
        With PCF component we have to render the controls using the Code component as an HTML element that get css applied from that PCSf css file. Does PCF control help to apply custom font to inbuilt canvas app controls available from the insert tab of a powerapps environemnt

  4. Could you share the code AROUND the style tag in your last screenshot? I can’t extract it from Git-Hub, and I would need something similar (I can’t make a new app for this because reasons).

Read Next

Sliding Sidebar