search

ArdanaLabs / DanaSwapUI

Other
3 stars 3 forks source link

Fallback fonts #61

Closed elite0226 closed 2 years ago

elite0226 commented 2 years ago
toastal commented 2 years ago

@CSVdB

How commonly do you expect fallback fonts to be used?

There are many cases where users disable the fonts for security, accessibility, or to save data. There are also some lesser-used browsers that don't support web fonts, so at least providing the base fallback like its 1999 is a good idea.

it seems painful to have to add a fallback font to each fontFamily separately. Can we define a company-wide fallback font?

As a JS variable we can at least change the stack easily across the project -- the alternative would be adding , sans-serif across the entire project so this step is towards better maintainability. Perhaps I would suggest a combination of CSS variables to allow fast, easy overriding and in some cases a utility class, but I'm not sure how these work in the CSS-in-JS context.

Approved.

CSVdB commented 2 years ago

@CSVdB

How commonly do you expect fallback fonts to be used?

There are many cases where users disable the fonts for security, accessibility, or to save data. There are also some lesser-used browsers that don't support web fonts, so at least providing the base fallback like its 1999 is a good idea.

it seems painful to have to add a fallback font to each fontFamily separately. Can we define a company-wide fallback font?

As a JS variable we can at least change the stack easily across the project -- the alternative would be adding , sans-serif across the entire project so this step is towards better maintainability. Perhaps I would suggest a combination of CSS variables to allow fast, easy overriding and in some cases a utility class, but I'm not sure how these work in the CSS-in-JS context.

Approved.

I agree that , sans-serif should be put into some variable. @elite0226 is it possible to do this through CSS directly?

elite0226 commented 2 years ago

I agree that , sans-serif should be put into some variable. @elite0226 is it possible to do this through CSS directly?

Umm, the whole project is using Material-UI for styling so it means in CSS-IN-JS though. I have no idea how to approach this.

toastal commented 2 years ago

I don't think it's possible given the Material UI dep -- toastal ไข่ดาว | https://toast.al PGP: 7944 74b7 d236 dab9 c9ef e7f9 5cce 6f14 66d4 7c9e