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

%3CLINGO-SUB%20id%3D%22lingo-sub-2966929%22%20slang%3D%22en-US%22%3EJSON%20to%20change%20font%20from%20Times%20to%20anything%20else%20-%20Syntax%3F%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2966929%22%20slang%3D%22en-US%22%3E%3CP%3EUsing%20SharePoint%20Online%2C%20and%20we%20have%20a%20list%20with%20a%20column%20that%20is%20formatted%20as%20a%20clickable%20email%20address.%20While%20all%20the%20other%20columns%20are%20some%20nice%20font%2C%20like%20Segoe%20or%20something%2C%20this%20email%20column%20is%20Times%20New%20Roman%20and%20it%20looks%20awful%2C%20but%20I%20have%20been%20unsuccessful%20in%20using%20JSON%20to%20format%20it.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20tried%20adding%20this%20to%20the%20formatting%2C%20but%20it%20remains%20TNR%3A%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22style%22%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3E%22font-Family%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3E%22Segoe%20UI%22%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EDo%20I%20have%20the%20syntax%20wrong%3F%20I've%20tried%20substituting%20%22Verdana%22%20and%20%22Arial%22%2C%20but%20nothing%20changes.%26nbsp%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EThanks!%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2966929%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2969463%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20to%20change%20font%20from%20Times%20to%20anything%20else%20-%20Syntax%3F%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2969463%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F695560%22%20target%3D%22_blank%22%3E%40Drogon365%3C%2FA%3E%26nbsp%3BI%20have%20used%20below%20JSON%20%26amp%3B%20it%20is%20working%20fine%20for%20me.%3C%2FP%3E%3CP%3E%3CSTRONG%3EExample%3C%2FSTRONG%3E%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%20%22elmType%22%3A%20%22a%22%2C%0A%20%20%20%22txtContent%22%3A%20%22%40currentField%22%2C%0A%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%22target%22%3A%20%22_blank%22%2C%0A%20%20%20%20%20%20%22href%22%3A%20%22https%3A%2F%2Fgoogle.com%2F%22%0A%20%20%20%7D%2C%0A%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%22font-family%22%3A%20%22Segoe%20UI%22%0A%20%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EOutput%3C%2FSTRONG%3E%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22ganeshsanap_0-1637058653259.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F327261iA50928BDB0486555%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22ganeshsanap_0-1637058653259.png%22%20alt%3D%22ganeshsanap_0-1637058653259.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3ETry%20using%20similar%20JSON%20styles%20%26amp%3B%20let%20me%20know%20if%20it%20works%20for%20you.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAlso%2C%20are%20you%20using%20column%20formatting%20as%20well%20as%20view%20formatting%20in%20the%20same%20list%3F%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%26nbsp%3B%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%26nbsp%3B%26amp%3B%20%3CSTRONG%3ELike%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

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 Times New Roman and it looks awful, but I have been unsuccessful in using JSON to format it. 

 

I've tried adding this to the formatting, but it remains TNR: 

 
"style":
{"font-Family": "Segoe UI"}
 
Do I have the syntax wrong? I've tried substituting "Verdana" and "Arial", but nothing changes. 
 
Thanks!
3 Replies

@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

ganeshsanap_0-1637058653259.png

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.

@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"}
}
 
 
 
 

 

@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.