[Bug]: HTML elements (button, div) do not inherit font-family in v11

[justindm234]

Package

@carbon/react

Browser

Chrome, Firefox

Package version

11.25.0

React version

17.0.0

Description

In v10, HTML elements like buttons and divs inherited their font-family from the BODY (I think via _css--reset.scss). This could be seen by inspecting an element's "Rendered Fonts" in Chrome's DevTools. In v11, HTML elements no longer inherit their font-family from BODY; instead the browser (user agent stylesheet) default is applied (Arial in Chrome).

v10 example
v11 failure

Reproduction/example

v10 - https://codesandbox.io/s/reset-font-family--carbon-10-10infd v 11 - https://codesandbox.io/s/reset-font-family--carbon-11-e0m5k0

Steps to reproduce

Render an HTML element in page that includes carbon v11's min css, DIVs and BUTTONs (and likely other HTML elements) render using the browser default font (Arial in Chrome)

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

zSystems Hardware Management Console

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[justindm234]

Any update on this? The change in font-family inheritance may drive a lot of work (and potential errors) for my product's migration to v11.