Bringing in IBM Plex

[joshblack]

Currently, we offer support for a handful of font faces (Sans, Mono, Serif) and a handful of weights (light, normal, semibold). We also offer a way for these fonts to be loaded easily through Google Fonts by default.

However, it seems like the usage for IBM Plex has grown broadly to include the following use-cases:

• Able to include different fonts from: http://github.com/ibm/plex for internationalization
• Able to leverage the Variable Font as opposed to Sans plus a variety of weights
• Able to bring in multiple weights as opposed to our limited set

This discussion is for figuring out the best API for providing these font faces across our different style targets, including:

• CSS
• Sass
• CSS-in-JS (?)

Some broad changes that we'd also like to see happen:

• Provide a dedicated API or config for this in Carbon
• Provide a solid default similar to what we have now that works for most use-cases
• Provide a solid ramp for adding additional languages for internationalization
• Use fonts directly from @ibm/plex instead of having any checked into our packages

Links & Resources

• IBM Plex on GitHub
• Example with Inter UI

[joker23]

Hey not sure if this is in scope of this discussion but looking at some of these ideas, I think our pain point can also be addressed with these changes:

We are required to go down the "self-hosted" fonts path (as we cannot anticipate that all users will have access to the public internet for their day to day) and we are following this guide (which works well); however, it would be great if there is a simpler way of implementing this instead of having to remake all of the font face configurations in our own code.

I assume if carbon starts directly using @ibm/plex then there is an opportunity to configure carbon components to use self host fonts?

[joshblack]

@joker23 yes, definitely. We'll try and see what makes the most sense for teams. The biggest source of inspiration for us with the Plex package has been: https://www.npmjs.com/package/inter-ui so hopefully something like this could be offered to make it easier to interop with tools like webpack or self-hosted fonts 👍

[reinisg]

@joshblack is there news for those who using webpack and want to load throught it? Or is there other possibility to load fonts in different way?