cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
matthu
Helper IV
Helper IV

Portal Fonts

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

1 ACCEPTED SOLUTION

Accepted Solutions

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 

 

 

ragavanrajan_0-1635720967894.png

 

Output: 

 

ragavanrajan_1-1635721011271.png

ragavanrajan_2-1635721040824.png

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.

 

View solution in original post

4 REPLIES 4
ragavanrajan
Super User
Super User

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? 

 

 

 

matthu
Helper IV
Helper IV

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

matthu
Helper IV
Helper IV

@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

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 

 

 

ragavanrajan_0-1635720967894.png

 

Output: 

 

ragavanrajan_1-1635721011271.png

ragavanrajan_2-1635721040824.png

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.

 

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Top Solution Authors
Users online (1,227)