SOLVED

Change font for text in sharepoint modern site

Bronze Contributor

Hi all,

 

How do I change the font in a sharepoint modern site currently there is no option to change font

 

Screenshot 2024-03-14 at 13.45.35.png

9 Replies

@AB21805 

 

Unfortunately, it is not possible to change the font (family) in SharePoint text web part currently. 

 

Microsoft is introducing new Brand Center in SharePoint, hopefully it will allow to change the fonts in the site: The new Brand Center in SharePoint empowers you to specify fonts, colors, logos, and other design elements that reflect the identity of your organization, products, subsidiaries, and more. 

 

SourceIntroducing the new Brand Center in SharePoint 

 

As this is a new feature request, you may add this as a new feedback/idea OR vote on existing/similar feedback at: SharePoint Feedback Portal 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

This there no other way I can add abit of text ie an intro to the intranet we have but with our company font - There has to be a way surely?

I did look at this which says its possible but still unsure how: https://learn.microsoft.com/en-us/sharepoint/dev/general-development/color-palettes-and-fonts-in-sha...

 

or by using code? Code snippet or Embed 

 

 

@AB21805 well to an extent it can be done with the modern script editor webpart but the fonts are limited.

 

0-WelcomeMessage.png

 

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)

Hi what are the fonts also what is the code?
best response confirmed by AB21805 (Bronze Contributor)
Solution

@AB21805 you need to install the modern script web part (https://sharepoint.handsontek.net/2023/03/15/use-script-editor-modern-sharepoint-sites/)  then the script I've used is:

 <div class="container">
  <h2><div class="welcome"><p id="WelcomeMsg"></p></div></h2>
  <div class="howcanwe"></div>
</div>

<script type="text/javascript">
var hour = new Date().getHours();
document.getElementById("WelcomeMsg").innerHTML = "Good " + (hour<12 && "morning" || hour<18 && "afternoon" || "evening")+", " + _spPageContextInfo.userDisplayName+". Welcome to the team" ;
</script> 

<style>
.container {
  position: relative;
  text-align: center;
  color: black;
  font-family: "Lucida Handwriting";
}

/* Centered text */
.welcome{
  position: absolute;
  top: 15%;
  left: 24%;
  transform: translate(-50%, -50%);
}

</style>

 

It only seems to work with web safe fonts.

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)

I will try this tomorrow. Is century gothic a font that works?

Also what are the web safe fonts?
A google search will tell you that.
This feature is scheduled to be launched in April 2024. See the following message center post: https://www.microsoft.com/en-us/microsoft-365/roadmap?filters=&searchterms=Fonts.
1 best response

Accepted Solutions
best response confirmed by AB21805 (Bronze Contributor)
Solution

@AB21805 you need to install the modern script web part (https://sharepoint.handsontek.net/2023/03/15/use-script-editor-modern-sharepoint-sites/)  then the script I've used is:

 <div class="container">
  <h2><div class="welcome"><p id="WelcomeMsg"></p></div></h2>
  <div class="howcanwe"></div>
</div>

<script type="text/javascript">
var hour = new Date().getHours();
document.getElementById("WelcomeMsg").innerHTML = "Good " + (hour<12 && "morning" || hour<18 && "afternoon" || "evening")+", " + _spPageContextInfo.userDisplayName+". Welcome to the team" ;
</script> 

<style>
.container {
  position: relative;
  text-align: center;
  color: black;
  font-family: "Lucida Handwriting";
}

/* Centered text */
.welcome{
  position: absolute;
  top: 15%;
  left: 24%;
  transform: translate(-50%, -50%);
}

</style>

 

It only seems to work with web safe fonts.

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)

View solution in original post