v7 - Remove su- prefix; update sans and serif fonts; add variant grou…

…p-hocus-within: (#918)

* Update TW and other packages

* Remove su- prefix; add group-hocus-within variant

* Update readme

* Update fontFamily in theme to include source serif 4 and source sans pro first; update google font import; remove su- in docs

* Update the doc for the font names

* Update font import in index.css

README.md

@@ -13,18 +13,18 @@ To see a live demo of Decanter v7 please [view the v7 styleguide](https://decant
 Decanter is a web design and development system for Stanford University.
 It includes a responsive layout system and a browsable collection of design patterns
 that can be used in any Stanford project.
-For Decanter v7, instead of using SASS/SCSS with the BEM naming convention, we use [TailwindCSS](https://tailwindcss.com/) to generate utility classes with some customization needed for our Stanford design system.
+For Decanter v7, instead of using SASS/SCSS with the BEM naming convention, we use [Tailwind CSS](https://tailwindcss.com/) to generate utility classes with some customization needed for our Stanford design system.
 
 ## Assets
-We have removed all assets from the repo in Decanter 7. Instead, we are using remote third party resources for our fonts and icons.
+We have removed all assets from the repo in Decanter v7. Instead, we are using remote third party resources for our fonts and icons.
 
 ### Fonts
 - For Source Sans Pro, Source Serif Pro, Roboto Slab, Roboto Mono - we include them using the `@import` method from [Google Fonts](https://fonts.google.com/).
 - For the Stanford ligature font that we use for the logo, we link them from the [University Communications media CDN](https://www-media.stanford.edu/assets/fonts/stanford.woff).
 
 ### Icons
 - We have removed FontAwesome (dependency and asset) completely from Decanter v7. For those who would like to continue using FontAwesome, please feel free to do so and include them using methods that are suitable for your own projects.
-- We recommend using the [react-hero-icon](https://www.npmjs.com/package/react-hero-icon) package as [Hero Icons](https://heroicons.com/) are created by the TailwindCSS team and are open source. They can be included as SVG or JSX elements.
+- We recommend using the [heroicons](https://github.com/tailwindlabs/heroicons) package as [Hero Icons](https://heroicons.com/) are created by the Tailwind CSS team and are open source. They can be included as SVG or JSX elements.
 
 
 ## Accessibility

fonts.css

@@ -1,8 +1,7 @@
 @charset "UTF-8";
 
-/** Source Sans Pro, Source Serif Pro, Roboto Slab, Roboto Mono (regular only) */
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@300;400;700&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&family=Source+Serif+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');
-
+/** Source Sans 3, Source Serif 4, Roboto Slab, Roboto Mono (regular only) */
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@300;400;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
 @font-face {
   font-family: "Stanford";
   src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype");