Add custom css to sharepoint online

Question

I have created Custom.master page from the SharePoint Designer 2013, which is a copy of the Seattle.master page. then I attached customcss.css file from the Site Library Folder. I saved the master page file and set as default master page in SP Designer. Also in Sharepoint online I have selected my custom.master page in Site Manger Page Setting. However the custom master page updates does not reflect to sharepoint site. In the viewsource of the page customcss.css link is not found. my aim is the add the customcss.css file to the sharepoint site so I can customize the fonts and the page look and feel. I tried with Alternate CSS Url to apply my customcss.css file however it reflects to Sharepoint Setting text not on the actual site home page.

Can any one please help. really appreciated.

here is the customcss.css file code

@import url("https://fonts.googleapis.com/css?family=Oswald");

.ms-rteFontFace-16

{

font-family: 'Oswald';

 font-style: normal;

  font-weight: 400;

}

.fontColorThemeDark , .fontColorThemeDarkAlt , h3, h4,

h4 span, h3 span

{

  font-family: 'Oswald' !important;

  font-style: normal !important;

  font-weight: 400 !important;

}

Answer 1

We would love to help you with your query, however, your query is related to SharePoint development,

It's not really a development question, it's a question about why out of the box functionality is not working. In classic sites you could always apply a custom stylesheet using this method with no development effort. Msft should either follow best practices and upgrade the classic features for real or remove them completely. A competent company would never do an "upgrade", but leave traces of non-working components in place.

Kem104-not sure if you're only working with classic sites but if you switch to modern you can add your own stylesheet with this script injection SPFx app: https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-injectcss/README.md

Answer 2

Hi Kem104,

Thanks for posting in the community.

We would love to help you with your query, however, your query is related to SharePoint development, and we have a specific channel Microsoft Q&A Community coping with such SharePoint development questions, I recommend you post a new thread (assign the tabs SharePoint and SharePoint Development) there for expert help.

Sorry for that our category may have limited resources to check on your concern further.

Thanks for your understanding.

George | Microsoft Community Moderator

Answer 3

Thank you for your response. really appreciate it

No, I am not working with classic sites. is it possible to add the custom css from the master page through sharepoint Designer? I have added the .CSS file to the .master page but the issue is it is not caught up at the site page. Does Sharepoint Designer is the tool that can help to upload the Customcss.css file?

It would be great to have another way to add the .CSS instead of SPFx app to inject.

Thank you

Answer 4

The modern pages don't use master pages, so anything you do in a master page will only affect classic content. In their effort to make things more difficult for their customers, Msft only allows SPFx based customization for modern stuff. Fortunately, non-Msft folks have created a lot of useful add ons like the one I linked to. They're easier to install than you might think-some already have the compiled sppkg file which you just have to upload to your app catalog site. For the one I linked to :

• Clone (download) the solution to a local directory.
• Open the folder in the free Visual Studio Code or Visual studio community
• Update the required files as noted in the solution's read me page
• Open a terminal from VSC or VS and run the commands shown to compile the sppkg file
• Find the sppkg file and upload it to your app catalog site (/sites/apps/AppCatalog)
• Activate it for all sites

That's it.

Answer 5

Hi @webbrewers,

Thank you for your reply.

I have created the Application Extension in VSC and uploaded the solution to AppCatalog same way as you mentioned Which works very well. However once custom CSS file is set up in Style Library , what are the steps to take when we modify the CSS file? Do I have to make a package solution again and upload it to the App Catalog site or just need to refresh the SP site after making changes to Custom CSS?