Font-stack not documented and applied to few elements only

[RamonvdW]

The font-family that is set in html body is not applied to input elements.
_variables.scss defines font-stack, but it is not in the materializecss documentation
_typography.scss applies font-stack to a few elements only: button, input, optgroup, select, textarea
_typography.scss applies font-family to html.

Effect: when overriding own font-family in body, it is inherited everywhere except the above elements, which will look different when the undocumented font-family has not been adjusted. This might be hard to spot and results in different looks on different operating systems and browsers.

Proposal: provide full support for setting font-family to groups of elements and document how to apply.

[DanielRuf]

The font-family that is set in html body is not applied to input elements.
_variables.scss defines font-stack, but it is not in the materializecss documentation
_typography.scss applies font-stack to a few elements only: button, input, optgroup, select, textarea
_typography.scss applies font-family to html.

Just to understand this a bit better. Is the issue due to different settings applied to different parts? Because normally setting it once for html, body should set it for all elements and there should be only further overwrites for specific reasons.

[RamonvdW]

Hi, I had it set my 2 fonts like this (css): body { font-family: 'Open Sans',sans-serif } h1,h2,h3,h4,h5,h6 { font-family: 'Ubuntu',sans-serif } On some browsers (specifically Chrome Linux) I noticed my buttons had a different style. Chrome on Win10 showed it properly… I found out about font-stack, but it is not in the document. I found out the fonts are applied to html while I applied them to body (html is a document container, who would consider to add fonts there?..). Etc. In the end I could only conclude there is too little documentation, some hidden features and some fonts being selectively applied. Hence the feedback. I hope this clarifies things, Ramon From: Daniel Ruf ***@***.***> Sent: woensdag 29 september 2021 20:00 To: materializecss/materialize ***@***.***> Cc: Ramon ***@***.***>; Author ***@***.***> Subject: Re: [materializecss/materialize] Font-stack not documented and applied to few elements only (#175) The font-family that is set in html body is not applied to input elements. _variables.scss defines font-stack, but it is not in the materializecss documentation _typography.scss applies font-stack to a few elements only: button, input, optgroup, select, textarea _typography.scss applies font-family to html. Just to understand this a bit better. Is the issue due to different settings applied to different parts? Because normally setting it once for html, body should set it for all elements and there should be only further overwrites for specific reasons. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#175 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMBUZHQAKWQT77UAUHLBUHTUENH3XANCNFSM5DNBMPFA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

[LoganTann]

Hello, by reading the code, setting the font in the body/html should correctly set your font-stack.
Can you please provide further information such as a CodePen (so we can quickly if we can reproduce this issue), which browser don't works (+ the Operating System) and the ones that works too ?

[LoganTann]

After some investigation, I can see that some rules are overriding the font stack in the _global.css file for the button, input, optgroup, select and textarea tags

I think this was added to override the default browser settings. Thus, I don't know if we can consider it as a feature 🤔

[LoganTann]

By the way, there are still some unused commented code (https://github.com/materializecss/materialize/blob/main/sass/components/_global.scss#L25), should we remove it ?

[DanielRuf]

Do you mean this?

This is just some example code to push a footer to the bottom of a page @LoganTann.

I think we can safely remove this code since this is also a well-known and documented way to make footers the right way.

[LoganTann]

Proposal: provide full support for setting font-family to groups of elements and document how to apply.

Fine, so in order to fix this :

• Document how to change the font stack
• Remove the commented-out code above.

I'm adding the docs + first good issue tags