How to Use Multiple Font Sizes in SharePoint Column JSON
Question details
The user wants to apply different font sizes to separate parts of text within a single SharePoint column value.
- Product
- SharePoint
- Device & OS
- not provided
- Scenario
- Customizing SharePoint list views using column-formatting JSON to display complex data, such as a large prefix number and smaller suffix text.
- Observed behavior
- By default, SharePoint JSON column formatting applies a single font size to the entire value, making it difficult to style specific text spans differently within the same field.
Ensure you have the necessary list management permissions to edit column settings and a basic understanding of JSON syntax before applying advanced formatting.
Use Child Elements in JSON to Split Text Styles
While a single element cannot have multiple font sizes, you can bypass this limitation by using parent and child elements in your JSON schema.
SharePoint column formatting does not support inline HTML or rich text formatting directly within a single string via JSON. However, you can use the 'children' property to split your data into multiple 'span' elements, applying different 'fontSize' styles to each part.
Navigate to your SharePoint list, click the header of the column you want to format, select 'Column settings', and then click 'Format this column'.
At the bottom of the formatting pane, click on 'Advanced mode' to reveal the JSON editor.
Create a parent 'div' with a 'children' array. Inside the array, define multiple 'span' elements (using 'elmType'). Assign specific text content (e.g., using substring expressions) and unique 'style' properties, such as 'fontSize: 18pt' for the first child and 'fontSize: 14pt' for the second.
Click 'Save' to apply the formatting. Review your list to ensure the text spans reflect the different font sizes.
Consult Microsoft Q&A for Advanced JSON Schemas
If your formatting requirements involve highly complex conditional logic, seek expert guidance from the Microsoft Developer community.
Format Data Effortlessly with WPS Office
Struggling with complex JSON code just to format your data? WPS Spreadsheet offers a visual, intuitive interface where you can apply multiple font sizes within a single cell instantly—no coding required.
- 1. Download and Install: Get WPS Office for free from the official website and install it on your PC or mobile device.
- 2. Import Your Data: Export your SharePoint list to an Excel file and open it directly in WPS Spreadsheet with perfect compatibility.
- 3. Apply Rich Formatting: Double-click any cell, highlight the specific text you want to change, and use the ribbon to set a unique font size.
Frequently Asked Questions
Can I format just part of the text in a SharePoint column?
Yes, but you cannot do it by styling a single string. You must construct a JSON object using child elements (like spans) to separate the text and apply distinct CSS styles to each piece.
Does SharePoint JSON column formatting support inline HTML?
No, SharePoint uses an Abstract Syntax Tree (AST) defined by JSON rather than raw HTML. You must define elements like divs and spans using the 'elmType' property.
Why isn't my JSON column formatting saving or updating?
This usually happens due to invalid JSON syntax. Ensure all brackets are closed, commas are placed correctly, and you are only using properties supported by the SharePoint column-formatting schema.
