Home

Increase Font Size of List Web Part

%3CLINGO-SUB%20id%3D%22lingo-sub-771443%22%20slang%3D%22en-US%22%3EIncrease%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-771443%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20looking%20for%20code%20I%20can%20input%20to%20a%20script%20or%20content%20editor%20to%20increase%20the%20size%20of%20the%20font%20in%20a%20List%20web%20part%20since%20it%20is%20much%20smaller%20than%20all%20the%20other%20text%20on%20the%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDoes%20anyone%20know%20of%20a%20code%20I%20could%20use%20to%20do%20this%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-771443%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Eweb%20part%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-771742%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-771742%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F370009%22%20target%3D%22_blank%22%3E%40TheWhiteGoose99%3C%2FA%3E%26nbsp%3BWhat%20version%20of%20SharePoint%20are%20you%20using%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-771755%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-771755%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F39836%22%20target%3D%22_blank%22%3E%40Beau%20Cameron%3C%2FA%3E%26nbsp%3Bmost%20recent%20version%20-%20sorry%2C%20I've%20lost%20track%20of%20which%20that%20is%20-%20but%20it%20is%20utilizing%20wiki%20pages%2C%20not%20modern%20pages%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-771774%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-771774%22%20slang%3D%22en-US%22%3E%3CP%3EI%20suppose%20it's%20possible%20in%20the%20classic%20pages%2C%20but%20I%20don't%20recommend%20doing%20it...%20if%20it's%20an%20issue%20you'd%20like%20to%20fix%20on%20all%20classic%20pages%2C%20I%20suggest%20injecting%20the%20CSS%20using%20a%20user%20custom%20action%20instead%20of%20using%20Content%20Editor%20Web%20Parts.%20%3CBR%20%2F%3E%3CBR%20%2F%3EHowever%2C%20I%20personally%20feel%20it's%20technical%20debt%20that%20isn't%20providing%20much%20value%20in%20return.%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-771846%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-771846%22%20slang%3D%22en-US%22%3EBy%20most%20recent%20version%20you%20mean%20SharePoint%20Online%3F%20Are%20you%20talking%20about%20the%20new%20list%20WebPart%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-772028%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-772028%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F60%22%20target%3D%22_blank%22%3E%40Juan%20Carlos%20Gonz%C3%A1lez%20Mart%C3%ADn%3C%2FA%3E%26nbsp%3Byes%2C%20SharePoint%20online.%26nbsp%3B%20And%20I%20believe%20so%2C%20the%20new%20List%20webpart.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-772292%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-772292%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F370009%22%20target%3D%22_blank%22%3E%40TheWhiteGoose99%3C%2FA%3E%26nbsp%3Bif%20you're%20using%20SharePoint%20Online%2C%20navigate%20to%20the%20list%20page%20and%20then%20select%20a%20column%20you%20want%20to%20change%20the%20font%20size%20to%20Column%20-%26gt%3B%20Column%20Settings%20-%26gt%3B%20Format%20This%20Column%2C%20a%20window%20appears%20on%20the%20right%2C%20Click%20Advanced%20Mode%2C%20and%20a%20text%20box%20appears%20for%20you%20to%20enter%20JSON%20code%20to%20manipulate%20the%20HTML.%20Copy%20and%20paste%20the%20Code%20snippet%20below%20into%20that%20JSON%20text%20box.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22%24schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22debugMode%22%3A%20true%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22%40currentField%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22font-size%22%3A%20%2218pt%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20can%20change%20the%20value%20%2218pt%22%20to%20whatever%20you%20want.%20The%20formatting%20settings%20will%20carry%20over%20to%20the%20Web%20part.%20Here's%20a%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Elink%3C%2FA%3Eto%20more%20JSON%20formatting%20if%20you're%20interested.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EEdit%3A%20I%20realize%20that%20you%20said%20you%20were%20utilizing%20wiki%20pages%3F%20This%20method%20will%20work%20with%20Modern%20list%20pages.%20(Tested)%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-773903%22%20slang%3D%22en-US%22%3ERe%3A%20Increase%20Font%20Size%20of%20List%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-773903%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F381656%22%20target%3D%22_blank%22%3E%40Tyler_Tucker%3C%2FA%3E%26nbsp%3Bhey%2C%20this%20does%20increase%20the%20font%20for%20the%20actual%20list%20-%20but%20it%20doesn't%20seem%20to%20change%20the%20List%20webpart%20font%20size%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E
TheWhiteGoose99
Occasional Contributor

I am looking for code I can input to a script or content editor to increase the size of the font in a List web part since it is much smaller than all the other text on the page.

 

Does anyone know of a code I could use to do this?

7 Replies

@TheWhiteGoose99 What version of SharePoint are you using?

@Beau Cameron most recent version - sorry, I've lost track of which that is - but it is utilizing wiki pages, not modern pages

I suppose it's possible in the classic pages, but I don't recommend doing it... if it's an issue you'd like to fix on all classic pages, I suggest injecting the CSS using a user custom action instead of using Content Editor Web Parts.

However, I personally feel it's technical debt that isn't providing much value in return.




By most recent version you mean SharePoint Online? Are you talking about the new list WebPart?

@Juan Carlos González Martín yes, SharePoint online.  And I believe so, the new List webpart.

@TheWhiteGoose99 if you're using SharePoint Online, navigate to the list page and then select a column you want to change the font size to Column -> Column Settings -> Format This Column, a window appears on the right, Click Advanced Mode, and a text box appears for you to enter JSON code to manipulate the HTML. Copy and paste the Code snippet below into that JSON text box.

 

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"debugMode": true,
"txtContent": "@currentField",
"style": {
"font-size": "18pt"
}
}

 

You can change the value "18pt" to whatever you want. The formatting settings will carry over to the Web part. Here's a link to more JSON formatting if you're interested. 

 

Edit: I realize that you said you were utilizing wiki pages? This method will work with Modern list pages. (Tested)

@Tyler_Tucker hey, this does increase the font for the actual list - but it doesn't seem to change the List webpart font size?

Related Conversations
Tabs and Dark Mode
cjc2112 in Discussions on
22 Replies
Stable version of Edge insider browser
HotCakeX in Discussions on
35 Replies
flashing a white screen while open new tab
cntvertex in Discussions on
13 Replies
How to Prevent Teams from Auto-Launch
chenrylee in Microsoft Teams on
28 Replies