how to add custom fonts to the SharePoint Brand Center
Applying your brand’s typefaces to your SharePoint site can assist maintain a unified visual identity throughout your company’s online presence. While there are many design tools available in SharePoint, custom fonts are a straightforward yet powerful method to make your site unique. We’ll go over each stage of the process in this article to help you add custom fonts to the SharePoint Brand Center.
Why Add Custom Fonts to SharePoint?
On your SharePoint website, using custom fonts can:
- Adhere to your corporate style guide to strengthen your brand identification.
- Boost visual coherence through all modes of communication.
- Make your website easier to navigate and more aesthetically pleasing to improve the user experience.
Step 1: Prepare Your Custom Fonts
Make sure you have the required font files first. Web-compatible versions of your custom fonts, like.woff or.woff2, are required. You should either publish these fonts to a document library or host them outside on a server or CDN so that SharePoint can access them.
Step 2: Upload Your Font Files to SharePoint
Take these actions to make the typefaces accessible:
1. Launch SharePoint: Go to the website where you wish to use the personalized fonts.
2. Add Fonts to a Document Collection:
- Navigate to your document library (or make a new one with just fonts in it).
- Choose your font files by clicking Upload.
- Make sure that every site visitor has access to the fonts due to library permissions.
Step 3: Add Fonts to SharePoint Using CSS
The next step is to use custom CSS to incorporate your font files into SharePoint after they have been uploaded. Here’s how to do it:
1. Go to the Brand Center for SharePoint:
- Click on Themes in the “Settings” section of the SharePoint Admin Center. The possibilities for branding are located here.
- As an alternative, you can use the Site Settings > Look and Feel > Alternate CSS URL to apply custom CSS.
2.Adapt the CSS on the Site:
- Open the personalized CSS editor or make a fresh CSS document.
- To import your custom fonts, add this CSS code:
font-family: ‘YourFontName’;
src: url(‘/path/to/your/font-file.woff’) format(‘woff’),
url(‘/path/to/your/font-file.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
3. Use the Personalized Fonts:
- Now, use CSS selectors to apply your custom fonts to various SharePoint site elements.
Step 4: Test and Publish the Changes
1. Test Your Custom Fonts: After saving your custom CSS, visit your website to make sure that all browsers and devices are displaying the fonts correctly. Verify that the website is obtaining the fonts from the appropriate URLs.
2. Clear Browser Cache: To view the new styles, try clearing the cache in your browser or doing a force refresh (Ctrl + F5) if the fonts don’t show up right away.
3. Publish the Customizations: After you’re happy with how the personalized fonts look, press the publish button.
Step 5: Maintain Accessibility and Compatibility
Although using custom fonts might improve the look of your SharePoint site, it’s crucial to keep accessibility and usability intact:
- Fallback Fonts: In the event that your custom fonts are not loaded, always include fallback fonts (such Arial or Helvetica).
- Web-safe Fonts: Verify that the custom fonts you use are both browser- and web-safe.
- Legibility: Verify that the typefaces are readable at various screen sizes and resolutions by testing their legibility.
conclusion
Adding your brand’s typefaces to your SharePoint site is a terrific approach to reinforce the visual identity of your company. You may quickly and simply use CSS to add custom fonts to the SharePoint Brand Center by following this instructions. This improves the visual appeal of your website while bolstering brand coherence across all internal and external communication channels for your company.
Custom fonts can help you elevate your SharePoint branding and produce a website that accurately conveys your business sensibilities and degree of professionalism.