Can we change the Font family, Font Color & Font size for the list view grid data and column headers

john john 986 Reputation points
2021-10-25T23:40:07.697+00:00

By default our list view grid will be shown using this built-in layout:-

143480-listviews1.png

but we are trying to achieve this layout, where the Grid data and the Grid's Columns' headers will have different font size, font color & font family, as follow:-

143554-4d.png

so is this something we can achieve using JSON formatting?

Thanks

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
11,213 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
3,294 questions
{count} votes

Accepted answer
  1. Yi Lu_MSFT 17,606 Reputation points
    2021-10-27T08:58:21.86+00:00

    Hi @john john
    You could format the column to change the font family, font size and font color with this code:

    {  
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
    "elmType": "div",  
    "txtContent": "@currentField",  
    "attributes":{  
    "class":"sp-field-customFormatter"  
    },  
    "style": {  
    "font-size": "2.0em",  
    "color": "red",  
    "font-family":"cursive"  
    }  
    }  
    

    As a result, the font will be changed:

    144181-image.png

    As to the column header, you need to inject CSS such as:
    .cellName-xxx{ font-family: xxx; font-size: xxx; color: xxx;}

    You could refer to this for more information:
    https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/

    Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.


    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.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.