Portal Fonts

(0) Share

Report

Posted on by Matthu

289

Hi all,

I have written some css to override fonts in my portal and it seems to work fine on desktop but when i load the portal on a mobile it changes to a strange font that is not on brand with the company I work for.

Does anyone know how I can force the portal to use a specific font throughout?

Thanks,

Matthu

Categories:

Power Apps portals

I have the same question (0)

All responses (4)

Answers (1)

Sort by

ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

Hi @matthu,

Please elaborate whether you are loading your custom fonts from CDN or from web files? Could you add a screenshot of where did you add the custom font to troubleshoot more?

Was this reply helpful? Yes No
Matthu 289 on at

Like (0)

Report
Copy link

Link copied!

Hi @ragavanrajan

All i have done so far is change fonts using css and copied content from word which is in the font I require. I imagine this method is so so so wrong! I think the copy and paste from word must put the font into the HTML and I change the fonts in headers etc with CSS like this:

/* for main navigation text*/
.navbar-static-top.navbar .menu-bar > .navbar-nav > li > a{
font-family: roboto , Arial, Noto-Sans-SC, sans-serif !important;
font-size: 18px !important;
font-weight: 300 !important;
font-color: #bebebc

I want the whole website to be presented in Roboto - Light or arial ideally.

Thanks for your input.

Matthu

Was this reply helpful? Yes No
Matthu 289 on at

Like (0)

Report
Copy link

Link copied!

@ragavanrajan I think i have found a post relevant to this here: How to use custom font for web page in PowerApps P... - Power Platform Community (microsoft.com) but I have a few questions I have added to that post for clarification.

Thanks

Was this reply helpful? Yes No
Verified answer

ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!
Hi @matthu

If you are looking to load Roboto font, Then you no need to upload a web file because the portal is already loaded with some of the most used google fonts.

Here are the steps for you.

In Portal Studio:

1. Upload a "Custom.css" File

2. Add the following code in the custom.css file

body, html, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Roboto" !important; } .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a { font-family: "Roboto" !important; }

3. Hit save and press sync configuration. Browse the website > Ctrl + F5

Output:

Hope it helps.
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

Was this reply helpful? Yes No