Forum Discussion

Drogon365's avatar
Drogon365
Copper Contributor
Nov 15, 2021

JSON to change font from Times to anything else - Syntax??

Using SharePoint Online, and we have a list with a column that is formatted as a clickable email address. While all the other columns are some nice font, like Segoe or something, this email column is...
SharePoint Online
ganeshsanap's avatar
ganeshsanap
MVP
Nov 16, 2021

Drogon365 I have used below JSON & it is working fine for me.

Example:

 

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "a",
   "txtContent": "@currentField",
   "attributes": {
      "target": "_blank",
      "href": "https://google.com/"
   },
   "style": {
     "font-family": "Segoe UI"
   }
}

 

Output: 

Try using similar JSON styles & let me know if it works for you.

 

Also, are you using column formatting as well as view formatting in the same list?

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Drogon365's avatar
Drogon365
Copper Contributor
Nov 16, 2021

ganeshsanap  That didn't work for me. I used: 

 

"style":{"font-family":"Segoe UI",
"font-size":"12px"}
 
and while the font size does change based on the px value I indicate, font-family won't change at all, even with Verdana, Arial, etc. 
 
No other formatting is being used on this list, although the full code for this particular column is pasted below for context. I've tried adding the font-family code to other, more basic lists in SharePoint, and the result there is that the data in the column disappears (screenshot below). 
 
{
"debugMode": true,
"elmType": "div",
"children": [
{
"elmType": "a",
"txtContent": "@currentField",
"attributes": {
"iconName": "Mail",
"class": "sp-field-quickAction",
"href": {
"operator": "+",
"operands": [
"mailto:",
"@currentField"
]
}
}
}
],
"style":{"font-family":"Segoe UI",
"font-size":"12px"}
}
 
 
 
 

 

  • ganeshsanap's avatar
    ganeshsanap
    MVP
    Nov 17, 2021

    Drogon365 Try copy pasting below JSON as it is & let me know if it works for you:

     

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "txtContent": "@currentField",
      "style": {
        "font-family": "Segoe UI",
        "font-size": "12px"
      },
      "attributes": {
        "iconName": "Mail",
        "href": {
          "operator": "+",
          "operands": [
            "mailto:",
            "@currentField"
          ]
        }
      }
    }
  ]
}

     

    Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Resources