How to add any font to Power Pages site

The Power Pages Design Studio makes it easier for users to change out-of-the-box colours and fonts and even manage custom CSS files. However, if you work with specific customer requirements, you can quickly discover that the required brand font (for example, Lato, Proxima, or other) is unavailable in the Design Studio! This is quite disappointing, as most customers are likely to have fonts for their website different to those 10 basic fonts listed:

I’ve been doing deep styling of Power Pages (also known as Power Portal back then), and this is one of my company’s (Technomancy) offerings. Deep styling means that I take the out-of-the-box Power Pages and make them look on the customer’s brand, making it a seamless experience for customers. This includes setting the right colours and typography (fonts) and redesigning the look and feel of standard elements (buttons, grids, lists, etc).

I can add required styles and overwrite some in a custom CSS file specific to the desired portal design. The Power Pagse studio allows you to do that, so you can upload your custom CSS file, containing the styles you need.

So you have a few basic style sheets – “bootsrap.min.css”, “theme.css” and “portalbasictheme.css” – and your specific styling, “my_style.css” in this case.

However, the gotcha is that you will need to override some styles, and when you try to override anything defined in the “portalbasictheme.css”, including fonts, it will not work, as the styles defined in that file are prioritised over your custom CSS theme! How disappointing #2.

You might think: Well, let’s edit the “portalbasictheme.css” then. And this is where the surprise lies – this is and autogenerated file! The next change in the Studio’s Styling tab will replace anything you change there.

Don’t worry; here is how to solve this and get the flexibility for custom styling, including fonts.

This trick is actually documented here, as a warning, though. The “portalbasictheme.css” is a “Web File” from the Power Pages perspective and can be deactivated!

Once deactivated, you lose the ability to use the prebuilt portal themes but gain the freedom to create your own! You still can upload your custom CSS file, but you are now in charge of all colours, fonts, etc – and this is exactly what we want!

So, the only thing left to do is to add font links to the header. This can be done in the Content Snippet “Head/Bottom”:

And now, you can use the font in the CSS file to override standard classes:

I hope this helps! If it does, like the post, follow me and contact me to discuss anything related to Power Pages and Power Platform!

Original Post https://cloudminded.blog/2023/12/16/how-to-add-any-font-to-power-pages-site/