Fonts consumption and distribution strategy

[huyenltnguyen]

Description

At the moment, we are having font files and fonts declaration in both the component library (this repo) as well as the library consumers (currently just /learn):

• Component library
  • https://github.com/freeCodeCamp/ui/tree/52dc875a7c4b5618c84563ed668e8713b371d10d/src/assets/fonts
  • https://github.com/freeCodeCamp/ui/blob/52dc875a7c4b5618c84563ed668e8713b371d10d/src/fonts.css
• /learn
  • https://github.com/freeCodeCamp/freeCodeCamp/tree/3b549867ee59a5aadde38fb7b3ff318678c461dc/client/static/fonts
  • https://github.com/freeCodeCamp/freeCodeCamp/blob/3b549867ee59a5aadde38fb7b3ff318678c461dc/client/src/components/layouts/fonts.css

I'm looking into ways we can simplify the fonts management on the consumer end, ideally:

• The consumers don't need to store the font files themselves
• The consumers don't need to store a stylesheet for fonts declaration

Approaches

Options:

1. Include the font files in the @freecodecamp/ui bundle, allowing downstream apps/packages to consume:

   import latoBold from '@freecodecamp/ui/dist/assets/fonts/lato/Lato-Bold.woff';

2. Use the fonts from FontSource, in both @freecodecamp/ui and its downstream apps/packages. The fonts will be self-hosted, but FontSource manages the font files as well as handling the fonts declaration for us.
3. Load the fonts from our CDN
4. Load the fonts from a third-party CDN (mention for completeness, but I don't think this option is more performant, and there are also privacy implications)

Research

Since a lot of component libraries use Storybook, the Storybook projects page was my first stopping point, and I also looked at other component libraries that I know of / am familiar with.

Libraries that bundle fonts:

• https://sap.github.io/fundamental-styles/?path=/docs/docs-introduction--docs#project-configuration
• https://github.com/Talend/ui/blob/3d14e99f9e3d248de34e42114d8fc180ed46b775/packages/theme/webpack.config.js#L25-L30
• https://github.com/nasa-jpl/explorer-1/tree/33e8e33d180331d07a6a8a1357932c16d48e1e9c/dist
• https://github.com/massgov/mayflower/tree/095603602431124feee7a26695ebef64e9ad1b8a/packages/assets/static/fonts
  • The fonts are bundled in a package called assets, which is then consumed by the component package https://github.com/massgov/mayflower/blob/095603602431124feee7a26695ebef64e9ad1b8a/packages/react/src/components/styles/_global.scss#L10
• https://github.com/undp/design-system/blob/dc3c9c6e2bac493ae996663ec83eb95cb8a8819f/webpack.config.js#L87

Libraries that promote loading fonts from FontSource:

• https://v2.chakra-ui.com/community/recipes/using-fonts#option-1-install-with-npm
• https://mui.com/material-ui/getting-started/installation/#roboto-font
• https://developers.quantum.thalesdigital.io/web-components/getting-started/installation#install-fonts
• https://www.saltdesignsystem.com/salt/getting-started/developing#use-fontsource
• https://cauldron.dequelabs.com/#setup

Libraries that load fonts from their own CDN:

• https://github.com/Shopify/polaris/tree/35adeb8cf47922d05e9a9f3d2dddbedecdaeb795/polaris-react#usage
• https://github.com/Workday/canvas-kit/blob/d1f2c6e38ec2aabed91501cd3dd7fae65f520a60/modules/react-fonts/README.md
• https://github.com/washingtonpost/wpds-ui-kit/blob/c164aa1833756b7f18bf6b3749e23223d46ff4fb/packages/kit/src/theme/stitches.config.ts#L187
• https://react.ui.audi/?path=/docs/getting-started-developer--docs

Conclusion

We usually want to load static assets from CDN for performance optimization, and this approach would help address the DX criteria mentioned above. However, I can't benchmark to be sure if / how the performance is improved.

As for choosing between bundling the fonts and using FontSource, it doesn't really matter because the approaches are essentially the same. We could move to FontSource if we want to reduce the code we have to house/maintain. But realistically, we don't have to touch the font files and fonts.css unless we need to change the fonts, so I think bundling the fonts ourselves is more straight-forward and would give us more control over our package.

I'll let others chime in on the CDN option. If we decide to not go with it, I think including fonts in the bundle should be the action item.