SharePoint Online use custom font on a site collection with modern experience

Question

I want to use a custom font on my SharePoint Online Site Collection. There is a solution by Hugo Barnier on GitHub but it doesn't work anymore. This solution injects a css file that is stored in the style library of the site collection on every page but doesn't work anymore. You'll get an error message:

x Refused to apply style from ‘https://<>.sharepoint.com/Style%20Library/custom.css’ because its MIME type (”) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

It seems to be a new issue and already known as you can read in his blog comments here. Does anyone know another solution for that?

Answer 1

My solution for that was to create an application customizer. I started from the official Microsoft site to build that extension: (Part 1 & Part 2). First Part 1 to initially build the solution and then Part 2 to create a placeholder. I made some changes in the .ts file and deleted everything that wasn't needed (e.g. stuff from part 1 and the topPlaceholder stuff). I changed the bottom placeholder the following way to insert my custom css file:

    if (this._bottomPlaceholder.domElement) {
    this._bottomPlaceholder.domElement.innerHTML = '<link rel="stylesheet" type="text/css" href="' +
    this.context.pageContext.site.absoluteUrl + '/Style%20Library/custom.css" />';
  }

That's it. I was able to use my custom font in the custom.css file and can make changes without touching the spfx solution.

Note!This solution doesn't work out of the box for guest users but you can find workarounds for that too. You have to go to your App Catalog site and give external users view permissions. First you have to enable to allow "Everyone" on the site to access.

Connect-PnPOnline -URL https://contoso-admin.sharepoint.com
Set-PnPTenant -ShowEveryoneClaim $true

Then you have to give "Everyone" read-access to the site and than reset the ShowEveryoneClaim property.

Connect-PnPOnline -URL https://contoso-admin.sharepoint.com
Set-PnPTenant -ShowEveryoneClaim $false

If there is a better solution or you just think this is a stupid solution, because... please leave a comment.