Using custom fonts in PowerApps

When using PowerApps, 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

PowerApps 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 PowerApps. 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='http://www.w3.org/2000/svg'>
    <style>
    @import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
        
    .custom { font: 128px 'Gloria Hallelujah', cursive; }
  </style>

  <text x='20' y='120' class='custom'>Test</text>
</svg>"
)
 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='http://www.w3.org/2000/svg'>
    <style>
      @font-face {
        font-family: 'Gloria Hallelujah';
        font-style: normal;
        font-weight: 400;
        src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url(https://fonts.gstatic.com/s/gloriahallelujah/v10/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zM.woff2) 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 }
  </style>

  <text x='20' y='120' class='custom'>Test</text>
</svg>"
)
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 PowerApps styling.

Hope this sparks some ideas and improvements for your projects.

Remember, never stop learning

UPDATE

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

GitHub:
https://github.com/Eickhel/PowerApps-samples

PowerApps Community Gallery:
https://powerusers.microsoft.com/t5/Community-Apps-Gallery/PowerFont/m-p/272163


Comments

  1. Reply

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

Leave a Reply

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