Unable to permanently change the font size and weight inside a sharepoint modern page (the class name keeps changinag)

Question

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

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?

Answer 1

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

Answer 2

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>