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 […]

Leave a Reply

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