Custom Fonts in PowerApps: Google Font loader

Remember my previous post about loading Custom fonts using SVGs in PowerApps? Well you are in for a treat.

The recent addition of PowerApps component framework ( PCF in short ) for Canvas Apps has opened a window of possibilities for app makers. Now we are able to mix no-code solutions with the power of code components, as a result, we have the power to break any barriers that stood in our solutions.

An example of these new features is the evolution of PowerFont. This App has evolved into an empowered PCF component which now allows you to:

  • Load any Google Fonts into your App while giving you the ability to use it in the same component.
  • Serve as a container for any given font and then reuse it in HTML Text controls
PowerFont PCF example

As you can see, this framework allow us to extend our apps to our heart’s content.

Features

Font loading

This component loads Google Fonts by adding the font’s stylesheet to the <head> section of our app. It also gives you the option to set these properties:

  • Text content
  • Font size
  • Font name

Extending the custom font through the app

As previously stated, the font is globally loaded into our App. Therefore, this font can be used in any HTML Text controls by simply setting the font in the control’s style:

<label style='font-family: Indie Flower, cursive; font-size: 25px; font-weight: bold'>This is a test</label>

As you can see, you can even add more styling to the label element and then get the exact result you want. 🙂

How to use it

Simply follow the documentation to enable this feature in your environment of choice and then start uploading PCF goodies. By the way, there is a treasure of components in the PCF Gallery website.

Bits

As always, you can find the code for this component and also the demo app in my GitHub repo for you to play with. Check the releases section.

I truly hope this solution awakes your inner developer cravings. 🤘🏼

Remember, never stop learning!

Comments

  1. Reply

    […] Custom Fonts in PowerApps: Google Font loader – PowerNimbus […]

  2. Reply

    Hi, I really appreciate the article you have created.
    However I am quite stumped as to how I should go about using this application.

    I’ve tried opening your sample application in Powerapps as well as adding the component. But I just keep getting errors while trying to upload.

    1. Reply

      Hey Alex,

      Have you enabled Power Apps Components Framework for canvas apps in your environment? Maybe that’s the reason

      Can you tell me more about the error?

      1. Reply

        Hi.

        I managed to fix it.
        I had fixed the admin issue, however for some reason I couldn’t upload the file as the Powerapps just kept saying try again later.
        So I just used file open and added the solution that way.

        I’ve tested it there after adding the component again and it works pretty well.
        I was thinking of using it to save multiple fonts to use in an app as a sort of Theme set.

        Really useful work, thank you so much.

  3. Reply

    This is pretty amazing, although unfortunately it can’t seem to find the one font I need. Do you have any ideas? I’m trying to use Libre Barcode 39 Extended, but it’s not finding it. Here’s the link to it: https://fonts.google.com/specimen/Libre+Barcode+39+Extended?query=code+39+extended

    1. Reply

      Thanks for reporting this… this is a bug because with this font, Google changes the embedded URL to “css2?” instead of “css?”.

      I’ll try to fix this on the GitHub repo.

      1. Reply

        Does the repo have a way of telling me when there is a version update?

  4. Reply

    Hi, I am a bit confused about which file to upload as the component

    1. Reply

      You can check the releases section of the GitHub repository, that’s the file you need to use.

    2. Reply

      Hi, please check the releases section on the GitHub section

Leave a Reply

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