Remember my previous post about loading Custom fonts using SVGs in Power Apps? Well you are in for a treat.
The recent addition of Power Apps 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
As you can see, this framework allow us to extend our apps to our heart’s content.
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
I truly hope this solution awakes your inner developer cravings. 🤘🏼
Remember, never stop learning!