In this article i would be showing you how to apply custom fonts to SharePoint online modern sites using SharePoint framework (SPFx) extensions.
Table of Contents
Step 1: Get your custom fonts.
You can checkout google fonts here for fonts.
Following font extensions would be required – eot, woff2, woff, ttf, svg.
If you don’t have all of the above extensions then you can generate them using this link.
Step 2: Upload your fonts to SharePoint.
You can upload all the font files to site assets library or any other library where you are maintaining resources for the site.
Step 3: Create a custom css file.
Create custom css file with declaration to font –
Step 4: Store css in SharePoint.
You can store custom.css in sharepoint, let us say you store it at “https://YOUR_SHAREPOINT_SITE/sites/Intranet/SiteAssets/Intranet/Styling/custom.css”.
Step 5: Create SharePoint framework extension.
You can refer to Microsoft documentation for creating the solution.
OnInit function of your typescript file, you can write the code below to inject the custom.css to the head of the SharePoint site –
That is all, all you need to do is compile the solution and deploy it in app catalog.
Whatever you write in this custom.css will be applied to all the pages of the site collection. You can target any element on SharePoint online site by applying styles in this file.
Disclaimer – Only drawback of this approach is that it will fire after initial page load so you would notice a delay in applying the styles in custom.css so please consider it before applying it in your projects.
Let me know if you face any issues in the comment section below.
YouTube Channel link.
Here is the video from my youtube channel if you want to see in action –
Do checkout my article on left navigation on SharePoint online modern sites.