1

I have added the list modern web part inside a sharepoint modern page >> and i need to change the font size and weight >> so using the F12 dev tools i inspected the related class (.root-135) as follow:-

enter image description here

and i added this style using the modern script web part :-

.root-135 {

    font-size: 15px;
    font-weight: bold;
}

and things worked well...but after couple of minutes the bold and size increase effect were removed, i recheck the class name and i found that it was changed from .root-135 to .root-152.. so my questions are:-

  1. How i can permanently change the font size and weight inside a sharepoint modern page?

  2. if using custom script using the modern script web part will not work, then what are the other approaches i can follow to increase the font size + font weight of my modern page?

2

You could use the column formatting to do that.

In your list, select the column you want to change > column settings > format this column. then advanced mode and put the JSON below - preview and save

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "15px",
    "font-weight":"bold"
  },
  "txtContent": "@currentField"
}

Since you are formatting a Person or Group, use the following

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "20px",
    "font-weight":"bold"
  },
  "txtContent": "@currentField.title"
}

The difference is in the @currentField.title

2
  • when i added this to a People or Group field i got this [Object Object] instead of the username – John John Feb 12 at 0:33
  • Edited the post, for people field – Murilo Santana Feb 12 at 0:56
0

If you have a custom webpart or are using the Modern SharePoint Script Editor on the page, simply make this call in JS:

<script>
let rootCss = document.querySelector([class~=‘root’]);
rootCss.setAttribute(‘style’, ‘font-size:15px;font-weight:bold’);
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.