I am starting a new SharePoint online project, and the first requirement that came in is to build a POC site for the customer, but they want to define a custom Fonts and Colors for the site to meet their standards.. so is this possible inside SharePoint modern UI ? to define custom fonts and Colors other than the build-in features provided by the Sitting>> Change the Look.. which does have a coloring options but does not have any options to change the font.
Thanks
Well I have faced that situation months ago where I had to apply some branding things for SharePoint Online modern pages. So here is my results from my investigations (which I already applied and it's working fine)
To do this, you can use the following steps :
Here fill the information about your tenant
$adminUPN="[email protected]"
$orgName="yourorganization"
$userCredential = Get-Credential -UserName $adminUPN -Message "Type the password."
Connect-SPOService -Url https://$orgName-admin.sharepoint.com -Credential $userCredential
Themepalette gotten from Theme Generator
$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 the theme to SharePoint Online
Add-SPOTheme -Identity "Custom-Theme" -Palette $themepalette -IsInverted $false
MORE DETAILS : https://sharepointmaven.com/how-to-configure-and-apply-a-custom-theme-in-sharepoint-online/
SharePoint Framework Extension Application Customizer is your solution
Using it, you can inject custom css to SP modern pages and luckily Microsoft already listed that on the official documentation (I hope you have some experience using SPFx because it's required)
First step : Download your font and copy it to your SPFx extension project using the following code
@import ‘https://fonts.googleapis.com/css?family=PT+Sans|PT+Sans+Caption|PT+Sans+Narrow’;
Second step : use this in your application customizer SCSS file
Then you can use the font like: font-family: ‘PT Sans Caption’, sans-serif;
Third step : use the CSS Selectors to find out the areas where you want to change the font style and apply your CSS customisation :
font-size: 40pt; color: orangered; font-weight: bold; font-family: 'PT Sans Caption', sans-serif;
Fourth step : Debug and test your code
Fivth step : Deploy it (depending on your need, you can choose the level where this customisation should be deployed "tenant, site collection or any level)
You can check here (SPFx Applications Customiser CSS Injection) for more details
Please accept the answer if it works.
Yes. You need to create a new theme. Color palette and fonts.
You will need to export the theme, change it, then import it again.
https://pixelmill.com/changing-colors-modern-site/
In Powershell, run this:
Connect-SPOService -Url https://yourtenant.sharepoint.com
Enter your central admin credentials.
Get-SPOHideDefaultThemes
Now, define a variable and assign the JSON to it:
$themepalette = [paste the code here]
Next, run the Add-SPOTheme commandlet: Add-SPOTheme
-Name "Your Theme Name" -Palette $themepalette -IsInverted $false T
You can access it from the “Change the look” panel.
This will only change colors, not fonts in modern pages. If you want to change fonts, you'll need to follow the link from the above url and do css injection.
Here's the project:
https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-injectcss
