Fluentui: Prevent fetching of segoe- and icon-font.
Bug Report
- __Package version(s)__: 5.3.0
Describe the issue:
Is there any way to prevent fabric from trying to fetch the Fonts and IconFont from the sharepointonline CDN? I have replaced all the fonts and implemented a custom icon component that I use in all components, instead of using the iconfont provided by fabric-react.
Even though the icon font is not being used, I can still see it being fetched from the CDN.
The same thing happens for Segoe webfont.
utrolig
All 16 comments
Yes you can. It's a bit hidden but if you stick this on your page:
window.FabricConfig = {
baseFontUrl: ''
};
This will bypass the font registration code, or redirect the base url for the fonts at another location.
dzearing
on 5 Oct 2017
@dzearing I've tried that, but it still tries to fetch the Segoe Webfont.
This function is called before mounting the application.
export const setFabricDefaults = () => {
/* tslint:disable */
const win = window as any;
/* tslint:enable */
win.FabricConfig = {
fontBaseUrl: '',
};
};
Even though I'm not using the Segoe font in the application, the font seems to be loaded from the sharepointonline cdn whenever a button element is used (at least that's what my initial assumption is.).
I wish there would be a way to set the default font in the theme, or similar.
utrolig
on 5 Oct 2017
@utrolig You have to execute the FabricConfig initialization before Fabric gets initialized (before you import it). Due to this, you need to stick it e.g. into a separate script in the <head> section of your html file. If you put it before the ReactDom render function inside your bundle, the imported modules get evaluated before your code gets executed, meaning that FabricConfig is not initialized with the fetch-prohibiting value for fontBaseUrl when Fabric gets initialized.
Nimelrian
on 26 Oct 2017
That doesn't seem to work either, I tried putting it in a script tag at the top of the head section and it still loads the fonts, probably from css, because there are lots of references to the CDN in fabric.css. I'd like to be able to use the app offline and without the differently licensed fonts, because I am not developing directly for Office or SharePoint.
HdHeini
on 1 Nov 2017
Do not include the css if you just use the React package. The React Fabric package creates the class names dynamically. By importing the @uifabric/styling package, one can use the enums contained in it to use these class names:
import { ColorClassNames, FontClassNames } from "@uifabric/styling";
const HugeSpan = () => (
<span className={`${FontClassNames.mega} ${ColorClassNames.themePrimary}`}>
I'm huge and blue (by default)!
</span>
);
@Nimelrian Thanks, I removed fabric.css, but still getting the requests to CDN from somewhere. Guess I need to dig a little further ...
HdHeini
on 1 Nov 2017
Do you use initializeIcons somewhere? This one also fetches the icons from the CDN.
Nimelrian
on 1 Nov 2017
No, but I just checked the code and it has to be "fontBaseUrl", not "baseFontUrl" as the first answer stated :) If I set this to "" in the script tag, I get no more requests to the CDN. Thanks for the help
HdHeini
on 1 Nov 2017
How do I replace the Icons for the dropdowns or DatePickers... For Button I successfully rendered fontawesomes icons in onRenderIcon callback. But not all the components have this callback available?
fidabhittani
on 11 Nov 2017
Use the registerIcons or registerIconAlias function from the Styling module and create Aliases to satisfy the internally used Icons.
Nimelrian
on 11 Nov 2017
Shouldnt this do the registration..
initializeIcons(
"https://maxcdn.icons8.com/fonts/line-awesome/1.1/fonts/line-awesome.woff2"
);
cause I see in console this . But I still see requests to the SharePoint CDN?
fidabhittani
on 11 Nov 2017
No, initializeIcons registers icons from specific font files (the parameter only defines the base url) with specific unicode codes. See https://github.com/OfficeDev/office-ui-fabric-react/tree/4d34110358cf6ec5cc9ed32f9034550d11c651f7/packages/icons/src
Nimelrian
on 11 Nov 2017
Just checking in--are you still seeing this issue? #4206 has been merged which may help with this as well, at least for Windows users.
Jahnp
on 9 Apr 2018
@utrolig Has this been resolved or do we need additional investigation?
michaelangotti
on 24 May 2018
@michaelangotti This has been resolved. Thank you.
ghost
on 24 May 2018
@stianbakken Glad to hear! I will close this issue.
michaelangotti
on 24 May 2018
Related issues
nekoya
·
3Comments
gabrielruss
·
3Comments
prashkan
·
3Comments
rickyp-ms
·
3Comments
satbai
·
3Comments