feat: add fonts to the system

[huyenltnguyen]

Checklist:

• I have read freeCodeCamp's contribution guidelines.
• My pull request has a descriptive title (not a vague title like Update index.md)

I noticed that Storybook doesn't display text in Lato font, even though we do have the font-family rule specified.

ui/src/global-element-styles.css

Line 71 in e021cb2

font-family: "Lato", Helvetica, Arial, sans-serif;

This is simply because we don't have the font files and font definitions in the repo.

This PR adds the following fonts to the library:

• Lato
• Noto Sans Arabic
• Hack-ZeroSlash

[huyenltnguyen]

The font files were copied from https://github.com/freeCodeCamp/freeCodeCamp/tree/main/client/static/fonts.

[huyenltnguyen]

Copied from https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/components/layouts/fonts.css.

[huyenltnguyen]

These are currently unused, but will be needed when we enable Tailwind preflight (#61).

[ahmaxed]

Thanks for adding the fonts.

[ojeytonwilliams]

How does this work with the client's fonts? If we're telling tailwind the fonts live in assets/fonts, doesn't that conflict with the fact the client doesn't look in assets?

That said, the client already imports the fonts in two ways via

import latoBoldURL from '../../../static/fonts/lato/Lato-Light.woff';

and via

@font-face {
  font-family: 'Lato';
  src: url('../../../static/fonts/lato/Lato-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: fallback;
}

so it seems like we already have extra imports. @ahmaxed should one of these go?

[huyenltnguyen]

How does this work with the client's fonts? If we're telling tailwind the fonts live in assets/fonts, doesn't that conflict with the fact the client doesn't look in assets?

What I have in mind right now:

• Add the CSS rules we need to base.css
• Export base.css out for consumption
• Include the fonts in the bundle
• Replace bootstrap.min.css in /learn with base.css (which includes the font definitions)
• Remove the font files and font definitions from /learn and consume the fonts exported from the component library

That is just the high level approach though. I still need to sort out the base.css content, build its final version, and try adding it to /learn to test.

---

so it seems like we already have extra imports.

I noticed this, too, but I assumed/thought the imports in client/src/components/layouts/default.tsx have something to do with Gatsby.

I'll defer this to Ahmad. (Though I could remove those imports as part of the CSS cleanup if they are redundant.)

[ojeytonwilliams]

That is just the high level approach though

Sounds good! I was just a bit confused about how these fonts related to the /learn fonts.

have something to do with Gatsby.

Yeah, I think Gatsby bundles them (via webpack). I'd have to dig into it to understand exactly what's used and why, though.