Refactor: Use `@next/fonts` and Add "Gotham Bold"

[mistryrn]

Let's switch to using @next/fonts instead of the import from Google Fonts in styles/default.scss.

• Use @next/font/google for current Google fonts

  • https://nextjs.org/docs/basic-features/font-optimization#google-fonts
  • In order to continue using the fonts as CSS/SCSS variables, will have to set the fonts as CSS variables like the following: https://nextjs.org/docs/api-reference/next/font#css-variables

• Add font family “Gotham Bold”

  • Can use @next/font/localwith a local version of the font https://nextjs.org/docs/basic-features/font-optimization#local-fonts
  • Font file attached: Gotham-Bold.otf.zip

• Use "Gotham Bold" as the font for the following (non-exhaustive list, probably few changes required since some of these are the same component being used on a different page):

  • Home Page: H1 (title)
  • Home Page: Bar chart title
  • Home Page: Section Titles ("Cloud Infrastructure", "Researchers Sharing Tools", "The Collaboratory and Cancer Genomic Research", "Interested in using our resources?", "Support Resources")
  • Home Page: Card Titles ("Explore our Documentation", "Tips for Cloud Computing", "Training Opportunities")
  • Footer: Section Headings (the bold "About Us", "Our Services", "Our Research", "Support", and "Contact Us")
  • Jumbotron H1
  • LateralColumn/LeftColumn/RightColumn heading/title
  • About Us: "Press Releases" section title
  • Our Team: Section Headings ("Principal Investigators", "Hardware & Software Infrastructure")
    • *change "Principal Investigator" to "Principal Investigators" (plural)
  • Contact Us: Card Headings/Titles ("Our Address", "Keep in touch")
  • Contact Us: "Join the Collaboratory" (Page Bottom CTA heading/title)
  • Request an Account: "Register your Projects and Users" (Hero Card heading/title)