Fluentui: Documentation: Using a different default font

[desmap]

Fabric is one of the best looking and most consistent UI kits for React (if not the best). I understand that it evolved out of the need to build an ecosystem around MS' core products but I also see that Fabric Core is clearly MIT-licensed. Hence, I assume that I can use it without any MS context if I leave out the assets (Segoe text fonts and icon fonts).

So, why is there not an easy way to change the default font to anything else?

And the option to self-host should be just a one-liner in the config.

I have crawled the docs, the issues and even Reddit for an answer for 2h and the only thing I found are two closed issues (#852, #871), cross-referencing themselves, without providing any answer except something like it's straight forward to override the font and an outlook that a solution might come (@mikewheaton in https://github.com/OfficeDev/office-ui-fabric-core/issues/852#issuecomment-266800583). Does it mean I have to add my custom-font-class to every Fabric component? I mean, I can do this somehow automatically in React but still...

Maybe I missed a key information but since Fabric is MIT (without the assets), it's clear that we need to add own text fonts as a turn-key thing without screening docs and issues for hours. Otherwise there should be a huge red warning on Fabric's Github and homepage saying that Fabric is intended for the MS ecosystem only (despite a confusing MIT license) and not for anything else. You'll will save people's time. The current license structure implies something else and might carry the negative connotation that it was just added for the sake of getting some attention in the dev community.

This is also, why I filed this as a bug and not as a feature. Since the core it MIT-licensed, I expect to have an easy option to opt out of MS' assets--without any default bundling with some non-MIT stuff. It should be the way around and Segoe should be the option.

I mean Fabric does almost everything right: Visually it's amazing, the web part is fully focused on React, the core is MIT, great support on Github. Now, just make custom stuff easy (changing colors isn't enough) and Fabric will leave Material, Semantic, Ant and Blueprint behind in a day.

[ecraig12345]

This is a great question, and I totally agree it's something we should document better. I haven't personally worked with styling/theming much, so @micahgodbolt @natalieethell @JasonGore do any of you have suggestions? I assume the font can be set as part of a theme, but it seems like there also ought to be a simpler way for people who don't need the full power/complexity of theming.

[ecraig12345]

@Jahnp too

[micahgodbolt]

duplicate of #7417

[ecraig12345]

@micahgodbolt I think this is actually different from #7417. This one is asking about changing the default font, whereas #7417 is about how to apply Fabric's built-in font styles to elements.

[ecraig12345]

Copying Micah's codepen link here since it's more relevant to this issue:
https://codepen.io/micahgodbolt/pen/RELxWW

At least to me, it seems like the codepen only shows part of the answer--what if you want to swap out the font face for all font styles/sizes, not just medium? Having to override the font for every style/size separately is a bit inconvenient.

[micahgodbolt]

@ecraig12345 I agree. i'd like to bring font families, font sizes, and font weights back to ITheme. This would make it much easier to change ALL fonts. #7385

[natalieethell]

@ecraig12345 to respond to your comment

At least to me, it seems like the codepen only shows part of the answer--what if you want to swap out the font face for all font styles/sizes, not just medium? Having to override the font for every style/size separately is a bit inconvenient.

I'm currently working on a PR that should solve this here: https://github.com/OfficeDev/office-ui-fabric-react/pull/7384.

[natalieethell]

That PR is merged.

[ecraig12345]

Awesome! @natalieethell Can you work on getting info about how to change the font added to the website? (Also reassigning this to you per David's suggestion.)

[ecraig12345]

Just got a new issue #9933 with the same question. Here's a basic example of using theme.defaultFontStyle and theme.fonts (complete code in codepen), which should hopefully help @cyphernull who opened the new issue. This should go in the root file for your site/app.

import { loadTheme, createTheme } from 'office-ui-fabric-react';

loadTheme(createTheme({
  defaultFontStyle: { fontFamily: 'Comic Sans MS', fontWeight: 'bold' },
  fonts: {
    medium: { fontSize: 50 }
  }
}));

@natalieethell Let me know if you'd like help updating the docs on the website. It would probably make sense to add a customization section to the Typography page and maybe also the Themes page (which could majorly use an update in general!).

[natalieethell]

@ecraig12345 thanks for the reminder! I just opened a PR.

[msft-github-bot]

:tada:This issue was addressed in #9981, which has now been successfully released as @uifabric/[email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-github-bot]

:tada:This issue was addressed in #9981, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site