Refactor: Bring Inter and IBM Plex Mono Fonts to Prod / Update Implementation

[TylerAPfledderer]

Description

This PR does the following for the Inter font:

• Bring the font to prod via theme config
• Remove the Fonts component in favor of a static CSS file of the font faces
  • Stores this new file in the static fonts folder
• Expose the static directory in Storybook to allow visibility of the Inter font

Also adds the IBM Plex Mono font in regular weight for the monospace font family stack

[gatsby-cloud]

❌ ethereum-org-website-dev deploy preview failed

Your build failed. View the build logs.

[gatsby-cloud]

✅ ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 37m build time

[nloureiro]

As far as I could text, the new Inter font works really well!!! It improves a lot the readability.

One question:
Did you remove the monospace font family?
it's where I see the main differences. Very small but changes a bit

We could keep the same monospace font family to avoid loading another font.
If you don't see that as a more significant load, I can also work on a new monospace font.

@TylerAPfledderer @pettinarip , what do you think?

[TylerAPfledderer]

@nloureiro

Indeed I removed the stack for mono by mistake. I will gladly add it back in.

Here is it's original location

Also, I found this twitter post from the author of Inter with pairing suggestions with a mono typeface.

At the very least, based on this I could put Roboto Mono to the top of the stack?

[nloureiro]

@nloureiro looks like your comment posted twice! 😅

Indeed I removed the stack for mono by mistake. I will gladly add it back in.

Here is it's original location

Also, I found this twitter post from the author of Inter with pairing suggestions with a mono typeface.

At the very least, based on this I could put Roboto Mono to the top of the stack?

But adding a new font will add to the load time? That was the main reason not to add a monospace font to the Design system.

Do you think a new font, like IBM Plex, can be negligible on the total load time?

(I prefer IBM plex to Roboto on pairing with inter)

[TylerAPfledderer]

@nloureiro correct, we would want to ensure a font is available in the project here for build.

If I'm not mistaken @pettinarip adding a font file locally should only add somewhere less than a kilobyte? If not way less!

[pettinarip]

If I'm not mistaken @pettinarip adding a font file locally should only add somewhere less than a kilobyte? If not way less!

Not sure if I follow you on that. It will depend on how many fonts we want to add and the size of each one of them.

https://github.com/IBM/plex/releases/tag/v6.3.0 this is the font we want to add, right? https://www.ibm.com/plex/

Questions @nloureiro:

• Do you think we need to support more than just latin characters?
• Do you think we need to support more than the regular weight fonts?

If we are only going to support regular-latin chars, here are the fonts to include:

• IBMPlexMono-Regular-Latin1.woff2 - 16.3kb
• IBMPlexMono-Regular-Latin2.woff2 - 13.3k
• IBMPlexMono-Regular-Latin3.woff2 - 6.6kb

Note: not sure the difference between 1, 2, and 3. Perhaps we could just use the Latin1 and that could be enough, not sure.

[nloureiro]

If I'm not mistaken @pettinarip adding a font file locally should only add somewhere less than a kilobyte? If not way less!

Not sure if I follow you on that. It will depend on how many fonts we want to add and the size of each one of them.

https://github.com/IBM/plex/releases/tag/v6.3.0 this is the font we want to add, right? https://www.ibm.com/plex/

Questions @nloureiro:

• Do you think we need to support more than just latin characters?
• Do you think we need to support more than the regular weight fonts?

If we are only going to support regular-latin chars, here are the fonts to include:

• IBMPlexMono-Regular-Latin1.woff2 - 16.3kb
• IBMPlexMono-Regular-Latin2.woff2 - 13.3k
• IBMPlexMono-Regular-Latin3.woff2 - 6.6kb

Note: not sure the difference between 1, 2, and 3. Perhaps we could just use the Latin1 and that could be enough, not sure.

Just Regular is fine. We don´t use any other weight on monospace.
Let me see if we can find the difference in these charsets, but I would guess that Latin1 might be enough.

[pettinarip]

Cool! so, lets wait for @nloureiro's confirmation on what font we need to load and we can add them @TylerAPfledderer

[nloureiro]

Cool! so, lets wait for @nloureiro's confirmation on what font we need to load and we can add them @TylerAPfledderer

on my side I did some research on monospace fonts and I my take is to go with IBM plex mono regular.

we just need regular and the .woff it's 39kb and it's acceptable for the overall loadtime

It's going to be used mostly on code snippets so we can use only the Latin set.

on the IBM plex github they recommend this
font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;

I think we can just go with
font-family: 'IBM Plex Mono', Courier, monospace;

should be good for us and less code.

my question:
where do we use monospace beside code?

I saw on the homepage

are there more places? that I did not found...

[pettinarip]

Sounds good @nloureiro!

Other parts where we are using the font are:

• Home page modals (for the code examples)
• Call to contribute widget. E.g. https://ethereum.org/en/developers/docs/smart-contracts/composability/
• Stats on the L2 page https://ethereum.org/en/layer-2/
• Titles for the tutorials, learn by coding section, the docs. E.g. https://ethereum.org/en/developers/tutorials/eip-1271-smart-contract-signatures/
  

[nloureiro]

Sounds good @nloureiro!

Other parts where we are using the font are:

• Home page modals (for the code examples)
• Call to contribute widget. E.g. https://ethereum.org/en/developers/docs/smart-contracts/composability/
• Stats on the L2 page https://ethereum.org/en/layer-2/
• Titles for the tutorials, learn by coding section, the docs. E.g. https://ethereum.org/en/developers/tutorials/eip-1271-smart-contract-signatures/
  

Interesting, all these sections that now have the monospace font, I already changed on the Design system.

that being said, I don´t see any change in these examples on the deploy preview, I assume we are using other Font family calls for these examples

Can you check where we are using it?

[pettinarip]

@nloureiro hmm on the preview deploy for this PR, I don't see the old font definitions, I see this:

Can you double-check that you are using the correct preview deploy link?

[nloureiro]

@nloureiro hmm on the preview deploy for this PR, I don't see the old font definitions, I see this:

Can you double-check that you are using the correct preview deploy link?

yes, it's on the preview deploy.

this is the lines that are supposed to be removed. That's why I think we declare the monospace font in other files

[TylerAPfledderer]

@pettinarip @nloureiro can never forget that there is the old theme file that also contains the stack, and might (I guess only sometimes) rear its head! 😅

[nloureiro]

@pettinarip @nloureiro can never forget that there is the old theme file that also contains the stack, and might (I guess only sometimes) rear its head! 😅

Right! That might be it!!!!

In this case, I would say that we can move forward in adding the IBM Plex mono as a monospace font.

I've added to the design system typography section

@pettinarip do you think it's better to do it on this PR? or create a new one on top of this one?

My take it's that once re touch the monospace family here, we might as well use this to add this font and QA all at the same time

[TylerAPfledderer]

@nloureiro @pettinarip I'll at least push a commit to revert the original stack back into the Chakra config

[nloureiro]

I think we should keep the monospace font family

[nloureiro]

ok, agree
Thank you

[pettinarip]

My take it's that once re touch the monospace family here, we might as well use this to add this font and QA all at the same time

Agree. Lets add it now and test all the font changes in this PR. @TylerAPfledderer how do you see doing this?

[TylerAPfledderer]

My take it's that once re touch the monospace family here, we might as well use this to add this font and QA all at the same time

Agree. Lets add it now and test all the font changes in this PR. @TylerAPfledderer how do you see doing this?

@pettinarip I would include the new font the same as with Inter, having a CSS file in the ./static directory to expose it to Storybook, or one consolidated CSS file of all the applied @font-face's.

Are you asking about testing as well?

[nloureiro]

I think he is referring to add the new font to this PR, and I will Re-test all the pages to see if all is good.

right?

[pettinarip]

Correct @nloureiro and @TylerAPfledderer.

Lets add the IBM font in this PR and then, Nuno and I, re-test everything again with the two fonts.

@pettinarip I would include the new font the same as with Inter, having a CSS file in the ./static directory to expose it to Storybook, or one consolidated CSS file of all the applied @font-face's.

I think it will be best to have it in its own file, static/fonts/ibm-plex-font-face.css + a new entry in the preload scripts of gatsby-ssr

[TylerAPfledderer]

I think it will be best to have it in its own file, static/fonts/ibm-plex-font-face.css + a new entry in the preload scripts of gatsby-ssr

@pettinarip on it!

[TylerAPfledderer]

@nloureiro @pettinarip this should be good to check with the new font!

[nloureiro]

I've checked a lot of pages in various OSs and all looks good!

[pettinarip]

Wohooo! lgtm thanks @TylerAPfledderer

cc @nloureiro merging this