Forum Discussion

AB21805

Bronze Contributor

Mar 14, 2024

Solved

Change font for text in sharepoint modern site

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

Mar 14, 2024

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)

AB21805

Bronze Contributor

Mar 14, 2024

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-sharepoint

or by using code? Code snippet or Embed

Rob_Elliott

Bronze Contributor

Mar 14, 2024

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

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

AB21805
Bronze Contributor
Mar 14, 2024
Hi what are the fonts also what is the code?
- Rob_Elliott
  Bronze Contributor
  Mar 14, 2024
  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)
  - AB21805
    Bronze Contributor
    Mar 14, 2024
    I will try this tomorrow. Is century gothic a font that works?
    
    Also what are the web safe fonts?