Add External Font to Power Pages Theme

(0) Share

Report

Posted on by AsaurdiffADTill

125

Okay not sure if i will find the answer before someone helps, but ill give it a try.

Just started the new Power Pages for the first time. I do have limited knowledge on CSS and HTML, but am using a template to start my build. I would like to add my company font (Walsheim) , not found in the standard fonts, to the entire template. I have read that you can upload a "custom.css" file to the page,but that was before Power Pages that provides a "theme.css" file in the VSCode editor.

The question is if i were to add a "custom.css" file to the would it overwrite the Theme.css file? If not, how do i edit the Theme.css file to use an external font?

I have found that i can create a css 'font' object that specifies the url and such, but don't know the syntax for how to place that through out the theme....

Previous link: How to use custom font for web page in PowerApps P... - Power Platform Community (microsoft.com) ;

Solved: Re: Portal Fonts - Power Platform Community (microsoft.com)

Categories:

Customize & extend

I have the same question (0)

All responses (12)

Answers (0)

Sort by

EmadBeshai 806 Moderator on at

Like (0)

Report
Copy link

Link copied!

Hi @AsaurdiffADTill ,

Any power pages website is using two main CSS files which are portalbasictheme.css and theme.css
to edit those files you need to open the Power Pages or Power Portal model driven app then from the left nav menu you need to select web files then searching for the needed file.
When you open the web file you can download the note attached to the web file record modify it then upload it again.

Note: you need to sync your website just to invalidate the cache.

If this post helps you with your problem, please mark this answer as Accepted Solution.
If you like my response, please give it a Thumbs Up.

Was this reply helpful? Yes No
AsaurdiffADTill 125 on at

Like (0)

Report
Copy link

Link copied!

Hello @EmadBeshai ,

I am pulling up the "new" look in my environment only (haven't found out how to move back to legacy yet). Its in a solution currently.
where i can upload the custom.css file

The issue i am having is we utilize a custom font (purchased by the org) and i would like to use the font file as a webfile similar to adding custom images. If i open this in VSCode editor it looks like below, but if i upload there it does not save.

you may notice i am referencing the fonts inside the webfiles folder. (this does not show them uploaded though)

Was this reply helpful? Yes No
EmadBeshai 806 Moderator on at

Like (0)

Report
Copy link

Link copied!

Hi @AsaurdiffADTill ,
To be able to access the web-file from the model driven app you can access it from https://make.powerapps.com

You can reference the custom styles into the header or the footer of you application to be accessible for all the website components

If this post helps you with your problem, please mark this answer as Accepted Solution.
If you like my response, please give it a Thumbs Up.

Was this reply helpful? Yes No
AsaurdiffADTill 125 on at

Like (0)

Report
Copy link

Link copied!

@EmadBeshai

with the new "Power Pages" the path is a bit different, but this helped me find those Web Templates. Inside the VSCode i can see them as well and do what you suggested. Unfortunately, it didn't work. That could be my format or syntax of the custom.css file. It could be possible that the "portalbasictheme.css" file overrides the custom.css file even though they say it should not. I know that if i change the portalbasictheme file it reflects, but that file has each class is customized in the file so it would be a LOT of work, also when i touch anything in the UI theme it will override all the custom changes i make to the file. So, the custom file should be the right answer, but it doesn't seem to override.
On that note, if i wanted to create a custom css file that imports fonts to be used, how would i go about formatting that? Currently:
@font-face { font-family: 'Walsheim'; src: url(/Walsheim.ttf) format("truetype");}
//as an example of an expected class override
footer { font-family: 'Walsheim',sans-serif; color: #ff0656c2; background-color: #e61212;} //etc..

Does this seem right? it doesn't seem to reference the font change...

Was this reply helpful? Yes No
EmadBeshai 806 Moderator on at

Like (0)

Report
Copy link

Link copied!

Hi @AsaurdiffADTill ,

Happy to hear that you are able to find some help from my reply.

Did you do the reference step for the CSS file at the header or footer templates?

If this post helps you with your problem, please mark this answer as Accepted Solution.
If you like my response, please give it a Thumbs Up.

Was this reply helpful? Yes No
AsaurdiffADTill 125 on at

Like (0)

Report
Copy link

Link copied!

I did do the reference in the footer HTML, yes. Considering the document library, the syntax is a bit different....

<href='/web-files/custom.css' rel="stylesheet"/>
under the <script> Then i placed the above syntax into the custom.css file. Font-Face & the Footer style... nothing changed 😞 .

I don't know if i mentioned, but i was able to upload the ttf file into the web-files and even tried this with the woff2 file.. not sure what is the one to use in this case honestly.

Was this reply helpful? Yes No
EmadBeshai 806 Moderator on at

Like (0)

Report
Copy link

Link copied!

Hi @AsaurdiffADTill ,

Are you able to see you custom CSS files at the browser elements?

If this post helps you with your problem, please mark this answer as Accepted Solution.
If you like my response, please give it a Thumbs Up.

Was this reply helpful? Yes No
AsaurdiffADTill 125 on at

Like (0)

Report
Copy link

Link copied!

Okay, So in Preview i was able to find my "href" syntax referencing the style sheet. In the Console i show a 404 error and when i navigate to the "file not found", it opens the application tab and show 2! custom css's. One, empty, the other has my content. But either way, no change.

The href in the 'Elements' tab under the footer...
the error shown in the console on load...
The empty file...
The file it should be referencing

Was this reply helpful? Yes No
EmadBeshai 806 Moderator on at

Like (0)

Report
Copy link

Link copied!

Hi @AsaurdiffADTill ,

As I can see from the relative path into the console the parent page is not the home page but page with partial URL web-files, please change the parent webpage to be the home page as shown below

If this post helps you with your problem, please mark this answer as Accepted Solution.
If you like my response, please give it a Thumbs Up.

Was this reply helpful? Yes No
AsaurdiffADTill 125 on at

Like (0)

Report
Copy link

Link copied!

It is set to the Home page.... then maybe i have the wrong syntax for the href?

Was this reply helpful? Yes No