Decrease Font Size in Web Part Using JSON Formatting

Question

I would like to use a web part on a communication site to display three columns of information. Ideally, I'd be able to put this into a 1/3 width zone, however, when I do this currently, the font size and spacing between columns is large enough that all three columns cannot be viewed without scrolling via the scroll bar that appears at the bottom of the web part. I was hoping to use JSON formatting to reduce the font size (changing column size would be a bonus) in order to get all three columns to display without scrolling, but have had no luck. Here are the things that I've tried:

1. Per How to change font size for all rows in a list using JSON on SP Online via Format View, I tried to use additionalRowFormat to change font size. It actually worked, however, I was wanting to decrease the font size to 10pt and sp-field-fontSize10 does not exist. I also could not find another class that I could apply with a 10pt font size.
2. Use the following JSON to apply a CSS style to the elements assuming it would overwrite the existing CSS formatting:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "hideColumnHeader": true,
    "hideSelection": true,
    "elmType": "div",
    "debugMode": true,
    "txtContent": "@currentField",
    "style":{
      "font-size": "10pt"
    }
}

I'm not very well versed in CSS, but I'm guessing that since this did not work, the existing style is taking precedence over the style being applied via this formatting and I don't know how to change that.

3. Use rowFormatter to create my own view. This worked very well, however, I imagine if there are a number of rows, it will simply extend the height of the web part to display all of the data rather than limiting to a maximum number of rows (say 20) and using pagination to view the remaining rows.

I saw there was a solution elsewhere that used an SPFx extension that would inject custom CSS, but I'd prefer to stay away from that and try to accomplish this using out of the box functionality/techniques if possible. Any suggestions on how I can reduce the font size for this web part? Thanks in advance for your help!

Answer 1

It turns out I was entering my JSON in the wrong place. When I opened the view formatting pane, I did not see that there were two options: Format View and Format Columns. The default is Format View which must have a different scope than Format Columns. Selecting Format Columns and saving the following JSON for each column caused the font size to change based on the value provided

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

This worked for font sizes entered in pt, em, and px as suggested by @matiur-rahman. I was able to resize my columns on the list page itself since hideColumnHeader was not active. I then re-added it to the Format View section and the column width changes carried over to the web part display on another page.

Answer 2

Instead of using Point (pt), you can try using "em", pixels (px), or percent.

You can find more on this at w3.org and here

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "font-size": ".75em"
  }
}