Notifications
Announcements
A PowerApp example of using custom fonts with the help of SVGs
More info at:
https://www.powernimbus.com/2019/04/using-custom-fonts-in-powerapps/
Hi,
Have you tried the steps in this post?
https://powernimbus.com/2019/04/using-custom-fonts-in-powerapps/
You need to take the stylesheets.css from Transforter and put the base64 inside the url() of the image data:
"data:image/svg+xml," & // You need to include this data uri to indicate that the code herein is an SVG image EncodeUrl( "<svg viewBox='0 0 1291 338' xmlns='http://www.w3.org/2000/svg'> <style> @font-face { font-family: 'Gloria Hallelujah'; src: url() format('woff2'), url() format('woff'); font-weight: normal; font-style: normal; } .Glory { font: 128px Gloria Hallelujah } .Colored { fill: red } </style> <text x='20' y='120' class='Glory'>This is a custom</text> <text x='70' y='280' class='Glory'>font in</text><text x='580' y='280' class='Glory Colored'>PowerApps!</text> </svg>" )
Let me know how it goes.
oops, sorry that was stupid of me.
I see that you're using a font called Gloria Hallelujah - where do you store it?
We have a proprietary font with in ttf and otf format and I have used transfonter to convert them to woff format.
I'm basically stuck there...
Hey,
The .msapp file doesn't need to be imported.
From the Power App portal, click on New app and from the left pane click on Open and then Browse for the downloaded file.
Hope it helps!
Dear @Eickhel
I have checked but I cannot find a app to upload from the GitHub you shared.
I have tried to zip PowerFont.msapp but it doesn't work when trying to import.
Thanks for your help!
Anthony
Hey Anthony,
Have you tried the example app in the GitHub repository? you just need to replace the font base64 with the one you like.
https://github.com/Eickhel/PowerApps-samples/tree/master/PowerFont/Canvas
Hello @Eickhel
I have downloaded from Transfonter and I have the Zip containing the CSS.
Unfortunately the document kind of stop at that moment and I don't really understand the next step - what to do with that.
Could you explain a bit further how you use the font now in PowerApps after convert it from transfonter?
Thanks a lot for your help
I've figured out how to do it:
<text x='20' y='120' class='regular'>" & label.Text & "</text>
I'm trying to dynamically change the text using the custom font. Within the text area, can I reference another item's value? Such that the line might look like:
<text x='20' y='120' class='regular'>label.Text</text>
Don't need to do that... while in the Power Apps Designer, click on File... Open... Browse... and then look for the msapp file 😉
I've created a .zip file of the PowerFont.msapp file, but I am unable to import it into my environment - any ideas or suggestions?