Changing Font Size and Link size of List Web Part in a Sharepoint Communication site

Question

Hi everyone - I was hoping to get some help with how I might increase the size of the text in a list web part that appears on Sharepoint Communication. I had looked to a solution here: https://techcommunity.microsoft.com/t5/sharepoint/increase-font-size-of-list-web-part/m-p/771443, where Tyler Tucker suggestion was to use this code to increase the font size:

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",

"elmType": "div",

"debugMode": true,

"txtContent": "@currentField",

"style": {

"font-size": "18pt"

}

}

This works for text fields, but not those with a link. In that case it changes the size of the link text, and then the label text is hidden. E.g. if the link is http://www.google.com and the label text is “Google Search” then the hyperlink text over-writes the label text and shows up at 18pt. So I have nice big text, but for the link, not the label “Google Search” (which I need).

I only know enough coding to be dangerous and not enough to solve this problem. Can anyone help me work out what the code should be?

Thanks so much in advance!

Answer 1

Hi @FavourGrace ,

You want to increase the font size of the hyperlink columns in the list web part by using JSON code.

Please using below JSON:

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

Here's my test result, it works well.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.