I am looking to see if there is a way we can customize font size, style for the Modern communication or team site. For Classic UI, its easy to do but not sure how to achieve it in modern.

If someone has done it, please share, will be very helpful. Just FYI, I am working with SP online modern.

Thanks in advance.

2 Answers 2


For Modern UI, we can create a custom CSS style and inject the CSS on modern pages using SPFx extensions to achieve it.

The following solution with source code for your reference.

SPFx Applications Customiser CSS Injection


This is possible using SharePoint Framework extensions application customizer, where you can inject a CSS to your page. Here is a link to Microsoft article which shows how to do that.

Now, using the above mentioned way you can override the CSS classes used in your SharePoint online modern pages. Here, you might see one problem, the css class names can be like 'title-12345a', 'link-12345a' etc., where a additional string of characters will be seen after the actual class names. To match those unknown characters using your CSS, you will have to use css selectors. Here is a w3 schools article on how to use it.

[class*=" appContainer-"] {
  font-size: 20px;

[class*=" title-"] {  
  font-weight: bold;
  font-size: 30px;

[class*=" link-"] {
  font-size: 15px;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.