search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.55k stars 2.74k forks source link

Prevent fetching of segoe- and icon-font. #3024

Closed utrolig closed 6 years ago

utrolig commented 7 years ago

Bug Report

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.

dzearing commented 7 years ago

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.

utrolig commented 7 years ago

@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.).

image

I wish there would be a way to set the default font in the theme, or similar.

Nimelrian commented 7 years ago

@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.

HdHeini commented 7 years ago

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.

Nimelrian commented 7 years ago

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>
);
HdHeini commented 7 years ago

@Nimelrian Thanks, I removed fabric.css, but still getting the requests to CDN from somewhere. Guess I need to dig a little further ...

Nimelrian commented 7 years ago

Do you use initializeIcons somewhere? This one also fetches the icons from the CDN.

HdHeini commented 7 years ago

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

fidabhittani commented 7 years ago

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?

Nimelrian commented 7 years ago

Use the registerIcons or registerIconAlias function from the Styling module and create Aliases to satisfy the internally used Icons.

fidabhittani commented 7 years ago

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? iconsissue

Nimelrian commented 7 years ago

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

Jahnp commented 6 years ago

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.

michaelangotti commented 6 years ago

@utrolig Has this been resolved or do we need additional investigation?

ghost commented 6 years ago

@michaelangotti This has been resolved. Thank you.

michaelangotti commented 6 years ago

@stianbakken Glad to hear! I will close this issue.