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)

ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report

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

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

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