web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :

PowerFont

Eickhel Profile Picture Posted by Eickhel 374 Most Valuable Professional

A PowerApp example of using custom fonts with the help of SVGs

PowerFont.png

 

More info at:

https://www.powernimbus.com/2019/04/using-custom-fonts-in-powerapps/

Categories:

Comments

  • Eickhel Profile Picture Eickhel 374 Most Valuable Professional
    Posted at
    PowerFont

    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.

  • AnthonyRegnier Profile Picture AnthonyRegnier 252
    Posted at
    PowerFont

    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...

     

     

  • Eickhel Profile Picture Eickhel 374 Most Valuable Professional
    Posted at
    PowerFont

    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.

     

    Eickhel_0-1600154934736.png

     

    Hope it helps!

     

     

     

  • AnthonyRegnier Profile Picture AnthonyRegnier 252
    Posted at
    PowerFont

    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

  • Eickhel Profile Picture Eickhel 374 Most Valuable Professional
    Posted at
    PowerFont

    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

     

  • AnthonyRegnier Profile Picture AnthonyRegnier 252
    Posted at
    PowerFont

    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

    Anthony

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted at
    PowerFont

    I've figured out how to do it:

    <text x='20' y='120' class='regular'>" & label.Text & "</text>

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted at
    PowerFont

    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>

  • Eickhel Profile Picture Eickhel 374 Most Valuable Professional
    Posted at
    PowerFont

    Hey,

     

    Don't need to do that... while in the Power Apps Designer, click on File... Open... Browse... and then look for the msapp file 😉

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted at
    PowerFont

    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?