How to add custom .css and .js file in SharePoint master page?

Ans

If you just want to add a custom CSS and JS to your master page, then instead of creating a new master page, try the following and check if it works for your purpose.

For Custom CSS : Use the Alternate CSS Url to set a custom CSS File.

Upload your custom CSS file to Style Library or Site Assets

Go to site setting > Look and Feel > Design Manager > Publish and Apply Design > Assign Master Page based on device channel .

                                                        

At Alternate CSS URL > Specify a CSS file to be used by this site and all sites that inherit from it: > Browse your file.

Check Reset all subsites to inherit this alternate CSS URL if you need to apply this for all Subsite.

                                                               or

<SharePoint:CssRegistration ID="CSSCustom" Name="&lt;% $SPUrl:~sitecollection/SiteAssets/css/FileName.css %&gt;" runat="server" After="Themable/corev15.css"/>

For referring a custom JS file follow this approach -

You can upload your JavaScript file in the Style Library and use the SharePoint:Scriptlink tag in Master Page to load it.

For example:

If you have a js file called YourScriptName.js. Goto Site Contents -> Style Library, create a folder for your custom scripts to lie, and upload the one which you want to use.

Then open up your master page and in the header section add a Scriptlink tag to load the js file.

<SharePoint:Scriptlink ID="Scriptlink9" runat="server" name="~SiteCollection/Style Library/YourFolderName/YourScriptName.js" language="javscript" />

The above tag goes in Master Page.