Fluentui: Set custom font paths

[ashutosh1211]

[micahgodbolt]

Could you add a few details here?

[ashutosh1211]

I want to use office-core in an web app which is locally deployed and don't have connectivity to internet. As office core downloads font from static Microsoft link if I deployed this in lan network font will not be downloaded. Can we have fonts package just like css files

[micahgodbolt]

@mikewheaton would probably be the best person to ask. He's been working a lot with the fonts lately.

[mikewheaton]

You can configure Fabric React to use a different base URL for the fonts:

window.FabricConfig = {
  fontBaseUrl: ‘https://myapp.com/fonts’
};

[ashutosh1211]

Thank you @mikewheaton :) , and how to get these fonts. and any dir structure i need to follow for this?

[ashutosh1211]

@mikewheaton tried with your solution but it is only working for icon fonts. for other fonts it is still fetching from static site.

[mikewheaton]

That looks like a bug – my understanding is that fontBaseUrl should configure both the icon font and text font paths. I've renamed the issue and marked it as a bug.

[Feiyang1]

I would like to add to this issue as well. The application is behind a proxy, so it doesn't have access to
static2.sharepointonline.com.
I set up FabricConfig as suggested, but it doesn't work reliably.
I have seen 3 different behavior so far:

1. Works as expected - all requests go to the custom url.
2. It tries to load resources from static2.sharepointonline.com and fails, then it goes to the custom url.
3. It ignores my FabricConfig and only try to load from static2.sharepointonline.com.

I searched the source code and found the urls are hard coded in fabric-7.2.0.scoped.css, fabric.css and fabric.rtl.css. And they are included in bundle.js created by webpack. I'm not sure if I'm doing anything wrong. Any suggestion?

It's kinda a critical issue for us, because we cannot use this library if it loads external resources. Any help is appreciated.

[Feiyang1]

@mikewheaton Is there any update on this? I really want it to be resolved, so we can start using it for the project.

[jonathaneckman]

This caught us off guard as well. Any update?

[Jahnp]

First, sorry for the delay!

So it seems there are sort of two questions here, both relating to icon font paths but one concerning Fabric Core and the other concerning Fabric React.

@Feiyang1 , all of the CSS files you mentioned (fabric-7.2.0.scoped.css, fabric.rtl.css, fabric.css) are part of Fabric Core and will not be affected by window.FabricConfig, which only pertains to Fabric React.

Today, Fabric Core allows you to override the default CDN path with your own path if you build the SCSS files yourself and override the value for $ms-font-cdn-path (link to line to change). Alternatively, for non-icon fonts like Segoe, you could override the font-family value in .ms-Fabric to point to your own font path.

WRT setting custom paths to icon fonts for projects using Fabric React, this is possible today thanks to the @uifabric/icons package. See this snippet from the "Getting Started" section on that page:

If you are using Fabric React components, you can make all icons available by calling the initializeIcons function from the @uifabric/icons package:

import { initializeIcons } from '@uifabric/icons';

// Register icons and pull the fonts from the default SharePoint cdn.
initializeIcons();

// ...or, register icons and pull the fonts from your own cdn:
initializeIcons('https://my.cdn.com/path/to/icons/');

This will make ALL icons in the collection available, but will download them on demand when referenced using the @uifabric/styling APIs getIcon or getIconClassName.

I'm going to go ahead and close this for now since this should be resolved, but please let me know if you still have issues or questions and I'm happy to re-open and dig in.

And--thanks @oengusmacinog for first digging in and bringing this to my attention.