Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
utrolig opened this issue Oct 4, 2017 · 16 comments
Closed

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

utrolig opened this issue Oct 4, 2017 · 16 comments
Assignees
@michaelangotti
Labels
Area: Fonts Type: Question ❔

Comments

@utrolig
Copy link

utrolig commented Oct 4, 2017 •
edited
Loading

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.
@dzearing
Copy link
Member

dzearing commented Oct 5, 2017

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
Copy link
Author

utrolig commented Oct 5, 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.).

image

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

@Nimelrian
Copy link
Contributor

@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
Copy link

HdHeini commented Nov 1, 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.

@Nimelrian
Copy link
Contributor

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
Copy link

HdHeini commented Nov 1, 2017

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

@Nimelrian
Copy link
Contributor

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

@HdHeini
Copy link

HdHeini commented Nov 1, 2017 •
edited
Loading

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
Copy link

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
Copy link
Contributor

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

@fidabhittani
Copy link

fidabhittani commented Nov 11, 2017 •
edited
Loading

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
Copy link
Contributor

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

@jonathaneckman jonathaneckman mentioned this issue Jan 20, 2018
Closed
@Jahnp
Copy link
Member

Jahnp commented Apr 9, 2018

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 michaelangotti self-assigned this May 1, 2018
@michaelangotti
Copy link
Collaborator

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

@ghost
Copy link

ghost commented May 24, 2018

@michaelangotti This has been resolved. Thank you.

@michaelangotti
Copy link
Collaborator

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

@microsoft microsoft locked as resolved and limited conversation to collaborators Aug 31, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@michaelangotti michaelangotti

Labels
Area: Fonts Type: Question ❔
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@Jahnp @dzearing @HdHeini @fidabhittani @ecraig12345 @Nimelrian @utrolig @michaelangotti