Allow to set the font family and sizes on the global theme

[leifmarcus]

Clear and concise description of the problem

As a developer using Histoire I want to use a brand font family and sizes so that the component library can be styled in a way that fits the design system of the brand.

Suggested solution

Currently in the global theme you can set the colors (which is already great) and the logo. As it seems, Histoire is using tailwind css to style the library. In that case it would be a possibility to set the fontFamily, fontSizes and fontWeights within the global theme.

Alternative

No response

Additional context

I really appreciate the value that the Histoire library brings for Vue component library documentations as it is really easy to use and also fully done in Vue. Nevertheless, it would be really nice, if the styling of the library documentation has more options to align it with the design system of the company.

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

[davidysoards]

I've also noticed inconsistent behavior between the dev and prod environments.

Using story:dev both my components and the Histoire UI use the fontFamily.sans set in my tailwind.config but after building and deploying or running story:preview the UI and my components all use 'Noto Sans'.

Setting font-sans on a global wrapper component will set my font on the components, but it looks better when the whole thing uses the same font.