Branding SharePoint Sites Using Site Branding

Branding SharePoint became easier with its recently launched Site Branding feature. This feature is a new SharePoint branding tool that allows you to create theme colors and custom font packages for SharePoint sites. This article will show you how to use it and list all options available for customization.

Quick Walkthrough 

FOR THEMES:

1. Go to your SharePoint page, click the cogwheel icon, and select Site Branding (new).
2. Switch to the Themes tab and add a New Theme.
3. Specify your Theme colors. Once done, click Next.
4. Name your newly created Theme colors and Save.
5. To apply your new Theme, go back to the SharePoint page, click the cogwheel icon, and select Change the look.
6. Select Theme. Then, choose the name of the theme color you just created from the list and click Save.
7. Close the Settings window.

FOR FONT PACKAGES:

1. Go to your SharePoint page, click the cogwheel icon, and select Site Branding (new).
2. Switch to the Font Packages tab and add a New Font package.
3. Specify the fonts you want to use and click Next.
4. Assign fonts for your titles, headings, etc. Then, click Next.
5. Name your newly created Font package and Save.
6. To apply your new Font Package, go back to the SharePoint page, click the cogwheel icon, and select Change the look.
7. Select Fonts. Then, choose the name of the Font package you just created from the list and click Save.
8. Close the Settings window.

TABLE OF CONTENTS

• Creating a Theme
  • Step 1: Open Site Branding
  • Step 2: Create New Theme
  • Step 3: Choose Your Colors
  • Step 4: Save Theme
• Applying the Theme
  • Step 1: Open Theme Settings
  • Step 2: Save Theme
• Creating Font Package
  • Step 1: Open Site Branding
  • Step 2: Create New Font Package
  • Step 3: Choose Your Fonts
  • Step 4: Assign Fonts
  • Step 5: Save Font
• Applying Font Package
  • Step 1: Open Font Settings
  • Step 2: Save Font
• Site Branding Features
  • Themes
  • Font Packages
• More Ways to Branding SharePoint Sites

Creating a Theme

Follow the steps below to learn how to use Site Branding, a new SharePoint branding tool:

Step 1: Open Site Branding

• Go to the SharePoint site where you want to create a theme and click the cogwheel icon:

• Select Site Branding (new) from the drop-down:

Step 2: Create New Theme

• Go to the [1] Themes tab and select [2] New Theme:

Step 3: Choose Your Colors

• Choose a Primary Color:

• Choose a Text Color:

• Choose a Background Color:

• (Optional) Enable Dark Theme. This option is best enabled when you're using a dark background color to ensure that the text and other menu items will be seen in lighter colors. Since we are using a light background color, we will keep this disabled:

• Choose an Accent Color:

NOTE:To learn more about the customizable features in the Themes tab, check out Site Branding Features.

Step 4: Save Theme

• Click Next:

• Write the [1] name of your theme and click [2] Save:

• You will now see your new theme. You may now proceed to Apply the Theme section to learn how to apply your new theme to your SharePoint site.

Applying the Theme

Follow the steps below to apply your Theme:

Step 1: Open Theme Settings

• Go to the SharePoint site where you want to apply a theme and click the cogwheel icon:

• Select Change the look:

• Click Theme:

Step 2: Save Theme

• [1] Find your theme from the list of choices and click [2] Save:

• Click the close icon to leave the Settings menu:

That’s it! You have successfully applied your created Theme.

Creating Font Package

NOTE:To create a font package for your SharePoint site, you must already have a Brand Center with custom fonts in it. To learn how to create the Brand Center and upload fonts in it, check out SharePoint brand center.  

Step 1: Open Site Branding

• Go to the SharePoint site where you want to create a theme and click the cogwheel icon:

• Select Site Branding (new) from the choices:

Step 2: Create New Font Package

• Go to the [1] Font Packages tab and select [2] New font package:

Step 3: Choose Your Fonts

• Select the [1] Display Font and the [2] Content Font:

• Click Next:

NOTE:To learn more about the customizable features in the Font Package tab, check out Site Branding Features.

Step 4: Assign Fonts

• Choose the font for the [1] Title and [2] Headline:

• Choose the font for the [1] Body and the [2] Interactive font:

Step 5: Save Font

• Click Next:

• [1] Write the name of the font package and click [2] Save:

• You will now see your new font package. You may now proceed to the Applying Font Package section to learn how to apply your new font package to your SharePoint site.

Applying Font Package

Follow the steps below to apply your Font Package:

Step 1: Open Font Settings

• Go to the SharePoint site where you want to apply a theme and click the cogwheel icon:

• Select Change the look:

• Click Font:

Step 2: Save Font

• [1] Select your font package from the drop-down and click [2] Save:

• Click the close icon to leave the Settings menu:

That’s it! You have successfully applied the font package you created. 

Site Branding Features

Below are the options you can customize inside Site Branding:

Themes

	Primary Color	this will be the central color of your brand. To pick a color, you can use the color picker, and write the hex code or the RGB code.
	Text Color	this will be the color of the text on your SharePoint site. To pick a color, you can use the color picker, and write the hex code or the RGB code.
	Background Color	this will be the background color of your SharePoint site. To pick a color, you can use the color picker, and write the hex code or the RGB code.
	Dark Theme	when enabled, this feature will ensure that your text will be readable when you have a dark color background.
	Accent Color	this color will be used sparingly throughout your SharePoint site to complement other brand colors. To pick a color, you can use the color picker, and write the hex code or the RGB code.

Font Packages

	Display font	this will be the font used to emphasize important items. This will not be used as widely as the content font.
	Content font	this will be the font used for the bulk of the content on your SharePoint site.
	Title	this is the font used for distinct items on your page. From the drop-down, you can choose the actual font and its style.
	Headline	this is the font used for headings and titles in the experience.  From the drop-down, you can choose the actual font and its style.
	Body	this is the font used for most of the text on your page.  From the drop-down, you can choose the actual font and its style.
	Interactive	this is the font used for buttons and other text that triggers action. From the drop-down, you can choose the actual font and its style.

More Ways to Branding SharePoint Sites

Looking to take your SharePoint branding even further? Consider ShortPoint Theme Builder, a powerful tool that lets you customize your site's appearance to perfectly match your company's voice and culture.

Theme Builder offers everything Site Branding does and so much more! Beyond theme colors and custom fonts, you can customize your site's layout, hide header elements, add a footer, and even control how your page appears on mobile devices. Start the interactive tutorial to see how it works:

TIP:Want to learn more about Theme Builder and its awesome functions? Head on over to ShortPoint Academy.

Visit our dedicated courses on ShortPoint Academy

Click Here!

Related articles:

• How to Showcase Different Types of Files Using SharePoint Web Parts
• Updates to the SharePoint Page Editing Experience in Microsoft 365
• How to Display Images on your SharePoint Page using SharePoint Web Parts
• How to Add Videos to Your Page Using SharePoint Web Parts