Using custom fonts in Power Apps

When using Power Apps, we get a fair amount of settings to change our text controls but sometimes, we need that little extra touch.

One of those options is the font family. We get 14 font styles that are suitable for most design ideas.

We might get more in the future but now, I’m going to show you how to include any desired font that might be required for any of your projects.

Also check: Google Font loader

Power Apps component framework

First approach, the HTML control

The first idea that you might have tried is to use the powerful HTML control that is included in Power Apps. This control lets you format it’s contents using plain HTML code, but it has it’s limitations. For example, you can’t include a style tag.

Style tag not working in HTML control
Wishful thinking

But hey!, you can use inline styling 😊

Inline style in HTML control

The thing is that, for the main objective of this post, we are unable to use the style tag for external fonts loading.

SVG Text to the rescue!

Now, guess where can we use the style tag? SVGs of course! using it’s style capabilities, we can try the font-face / @import tag required for external font loading and then style the TEXT tag.

Let’s try this:

"data:image/svg+xml," & EncodeUrl(
    "<svg viewBox='0 0 1291 338' xmlns=''>
    @import url('');
    .custom { font: 128px 'Gloria Hallelujah', cursive; }

  <text x='20' y='120' class='custom'>Test</text>
 SVG styling not working
Excuse me, this is not what I’ve ordered

Comic Sans? really? well, as you can see, we still have issues loading the font. Let’s try something else:

"data:image/svg+xml," & EncodeUrl(
    "<svg viewBox='0 0 1291 338' xmlns=''>
      @font-face {
        font-family: 'Gloria Hallelujah';
        font-style: normal;
        font-weight: 400;
        src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url( format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    .custom { font: 128px Gloria Hallelujah }

  <text x='20' y='120' class='custom'>Test</text>
SVG styling still not working
At least is not Comic Sans

Not even using the font-face that is returned from Google’s URL loads the font correctly 😒.

The workaround

So, if loading external content is the issue, why not lend a hand? We can use tools like Transfonter to convert our fonts into base64. This way we can have the font inline in our SVG.

Transfonter service

Simply load your font and make sure to select “Base64 encode”. After clicking “Convert” it will let you download a zip file with the conversion result. Inside the archive you’ll find a stylesheet.css with the font-face contents needed for our image:

SVG styling working with base64 font
Hello gorgeous

Converting fonts into base64 might be an overkill but it opens a whole window of opportunities regarding Power Apps styling.

Hope this sparks some ideas and improvements for your projects.

Remember, never stop learning


I’ve uploaded the demo app so you can play with it 😉


Power Apps Community Gallery:


  1. Reply

    […] my previous post about loading Custom fonts using SVGs in Power Apps? Well you are in for a […]

  2. Reply

    like your font-manual!

  3. Reply

    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. Reply


      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

Leave a Reply

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