Change styles including fonts in SharePoint Online modern pages


Following article is the output for my investigation on SharePoint online branding techniques, which shows how to brand SharePoint online modern pages to match your company guidelines. This includes changing the color scheme of SharePoint Online and Office suite and using your company approved fonts for the pages.

As of now, May 2nd, 2019, Microsoft doesn’t support Alternate CSS or any other out of the box way to use custom style in modern pages in SharePoint online.

I have tried this exhaustively and following are my findings:

Using Classic Themes in modern pages doesn’t change font, only color scheme and background image is taken into consideration.

Following excerpts is taken from SharePoint site theming overview article from Microsoft

Description on using classic theme in SharePoint modern pages

Further more, Master page updates has no effect on Modern design and SharePoint modern user interface ignores custom master pages and alternate CSS.

Reference Link : https://docs.microsoft.com/en-us/sharepoint/branding-sharepoint-online-sites-modern-experience

Description of Site Branding in Classic Experience in SharePoint online

Reference Link 2: https://docs.microsoft.com/en-us/sharepoint/dev/transform/modernize-branding

Description on modernize site branding

So, you wanted to brand your site with a specific font and specific styles but so far you can only create a custom theme and change the color combination.

To do this, you will first have to find a suitable color combination using the Theme Generator site from Microsoft.

https://developer.microsoft.com/en-us/fabric#/styles/themegenerator

Once you are satisfied with your theme colors, copy the output from the the ‘Output’ section of the page and chose ‘PowerShell’ option.

Theme Palate from Theme Generator site

Now, check the following site which contains PowerShell commands which would let you install your new theme:

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-powershell

Here is your code:


$adminUPN="admin@yourorganization.onmicrosoft.com"
$orgName="yourorganization"
$userCredential = Get-Credential -UserName $adminUPN -Message "Type the password."
Connect-SPOService -Url https://$orgName-admin.sharepoint.com -Credential $userCredential

$themepalette = @{
"themePrimary" = "#0078d4";
"themeLighterAlt" = "#eff6fc";
"themeLighter" = "#deecf9";
"themeLight" = "#c7e0f4";
"themeTertiary" = "#71afe5";
"themeSecondary" = "#2b88d8";
"themeDarkAlt" = "#106ebe";
"themeDark" = "#005a9e";
"themeDarker" = "#004578";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#c2c2c2";
"neutralSecondary" = "#858585";
"neutralPrimaryAlt" = "#4b4b4b";
"neutralPrimary" = "#333333";
"neutralDark" = "#272727";
"black" = "#1d1d1d";
"white" = "#ffffff";
}

Add-SPOTheme -Identity "Custom-Theme" -Palette $themepalette -IsInverted $false

Next step,

  1. go to your SharePoint site and apply this new theme.
  2. Then, chose an appropriate color for the header, which would be now based on your theme.

Check this article from Microsoft if you don’t know how to:

https://support.office.com/en-us/article/Change-the-look-of-your-SharePoint-site-06bbadc3-6b04-4a60-9d14-894f6a170818

You can also chose to brand the Office 365 suite bar. Here is how: https://docs.microsoft.com/en-us/office365/admin/setup/customize-your-organization-theme?view=o365-worldwide

At this point, you should be able to brand your site with your company colors.

What’s left? Font’s and other styles in the page which you might want to modify further. So, you want to chose a custom font for your SharePoint online modern page, how to apply it? SharePoint Framework Extension Application Customizer is your best choice now.

Using SharePoint framework extension application customizer, you can inject custom css to the SharePoint modern pages. Please check the following tutorial to understand how you can create one for yourself:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension

I would suggest to go one step further and check the phase 2 of the solution where they show how to add custom scss file in your project and use it:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions

How to make it useful for our case?

Step 1: Download your font. If you are using Google Fonts, then go to https://fonts.google.com, chose your font and get the import URL, which would look like below:

@import url(‘https://fonts.googleapis.com/css?family=PT+Sans|PT+Sans+Caption|PT+Sans+Narrow’);
 
Step 2: Use this import statement in your Application customizer scss file but remove ‘url’ portion, so it would look like,
 
@import ‘https://fonts.googleapis.com/css?family=PT+Sans|PT+Sans+Caption|PT+Sans+Narrow’;
 
Then you can use the font like:

font-family: ‘PT Sans Caption’, sans-serif;

font-family: ‘PT Sans Narrow’, sans-serif;

font-family: ‘PT Sans’, sans-serif;

You can also put the fonts in a Shared location of your SharePoint site and import from there.

Step 3: Use CSS selectors to find out areas where you wan to change the style. As an example, if you want to change the style of the title for all SharePoint webparts in your page, then you might have to use the CSS selector span[role=heading] , this would match all the ‘span’ withing your modern page with ‘role’ attribute value as ‘heading’, which is for most of the Web Part Titles.
 
Like,

span[role=heading]
{
font-size: 40pt;
color: orangered;
font-weight: bold;
font-family: 'PT Sans Caption', sans-serif;
}
 
Check this article from W3Schools to understand the usage of CSS selectors: https://www.w3schools.com/cssref/css_selectors.asp
 
If you are unsure which selectors to use, I would suggest opening the site using ‘Developer Tools’ and check which style classes are taking precedence for the component you want and then use a CSS selector to map it, like below style which would update the left and top navigation menu links:
Following selector would match all the CSS classes that starts with “link-“, which are the left and top navigation menu links:
[class^="link-"],
[class*=" link-"] {
font-family: 'PT Sans Narrow', sans-serif;
}
 
Step 4: Debug your code. Make sure to do hard refresh (CTRL+F5) to check your changes.
 
Step 5: Deploy your solution to tenant level or site collection level or the level you want.
 
Here is one ready made example where you can inject a custom css to you SharePoint modern page, which would be stored in your SharePoint online location.
You can use this example and define the CSS style the above mentioned way to make it work for your need. However, I haven’t tested it myself, so I wouldn’t be able to tell you if that works or not.
 
I hope it would solve your problem of branding your SharePoint modern pages with custom font and custom CSS styles.
 
Following is the screenshot from one of my test sites. I know, it looks ugly, but it proves the point, right 😉
 

How to inject custom css on SharePoint online modern pages using SharePoint Framework (spfx) extensions/ How to add custom css to SharePoint online modern pages/ How to change fonts in SharePoint online modern pages.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s