Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add IBM Plex font locally #28325

Merged
merged 1 commit into from Sep 14, 2021
Merged

Conversation

siriwatknp
Copy link
Member

Due to #28058 (comment)

@mui-pr-bot
Copy link

mui-pr-bot commented Sep 14, 2021

No bundle size changes (experimental)

Generated by 🚫 dangerJS against 360f3e5

// use https://cssminifier.com/ to minify
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: `@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Regular.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Regular.woff) format('woff'),url(/static/fonts/IBMPlexSans-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Medium.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Medium.woff) format('woff'),url(/static/fonts/IBMPlexSans-Medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Sans';src:url(/static/fonts/IBMPlexSans-Bold.woff2) format('woff2'),url(/static/fonts/IBMPlexSans-Bold.woff) format('woff'),url(/static/fonts/IBMPlexSans-Bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url(/static/fonts/IBMPlexMono-Regular.woff2) format('woff2'),url(/static/fonts/IBMPlexMono-Regular.woff) format('woff'),url(/static/fonts/IBMPlexMono-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url(/static/fonts/IBMPlexMono-SemiBold.woff2) format('woff2'),url(/static/fonts/IBMPlexMono-SemiBold.woff) format('woff'),url(/static/fonts/IBMPlexMono-SemiBold.ttf) format('truetype');font-weight:600;font-style:normal;font-display:swap}`,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this approach is better than using @font-face in .css so it does not need to load css from the server again.

But it increase html size from 16.5kb to 16.6kb, so I think it is fine.

@michaldudak
Copy link
Member

michaldudak commented Sep 14, 2021

I don't see any difference, to be honest. But still, it is legible to me. I guess it depends on the screen quality.

I set my browser font size to 14px and adjusted font sizes to be the same.
Left is from current next.material-ui.com, right is this PR preview:

image

Both look exactly the same as on https://www.ibm.com/plex/.

Copy link
Member

@michaldudak michaldudak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Anyway, let's merge it in. Perhaps on some system configurations, Google serves another variant of the fonts. Let's wait for the community feedback and see if it improves anything.

@siriwatknp siriwatknp changed the base branch from next to master September 14, 2021 08:40
@siriwatknp siriwatknp merged commit 292d7d6 into mui:master Sep 14, 2021
@danilo-leal
Copy link
Contributor

Thanks guys for working on it!

@zannager zannager added the docs Improvements or additions to the documentation label Jan 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants