Add Satoshi fonts, remove Circular (#23)

* Add Satoshi fonts, remove Circular

* trader-fe -> v4-web

* Remove CircularMono

* Update README for font instructions

* update CONTRIBUTING.md

src/styles/fonts.css

@@ -1,38 +1,42 @@
-/*
- * Legal Disclaimer for Web licence
+/**
+ * @license
  *
- * Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats.
+ * Font Family: Satoshi
+ * Designed by: Deni Anggara
+ * URL: https://www.fontshare.com/fonts/satoshi
+ * © 2023 Indian Type Foundry
  *
- * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
- * 
- * It is strictly prohibited to rename the font and to download or use these fonts in any other media. 
- * 
- * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
- *
- * dydx.exchange (monthly pageviews: <50K)
- *
- */
+ * Font Styles:
+ * Satoshi Regular
+ * Satoshi Medium
+ * Satoshi Bold
+ * Satoshi Black
+*/
+
 
 @font-face {
-  src: url("fonts/CircularXXWeb-Book.woff2") format("woff2");
-  font-family: "Circular";
-  font-weight: 450;
+  src: url("fonts/Satoshi-Regular.woff2") format("woff2");
+  font-family: "Satoshi";
+  font-weight: 400;
 }
 
+
 @font-face {
-  src: url("fonts/CircularXXWeb-Medium.woff2") format("woff2");
-  font-family: "Circular";
+  src: url("fonts/Satoshi-Medium.woff2") format("woff2");
+  font-family: "Satoshi";
   font-weight: 500;
 }
 
+
 @font-face {
-  src: url("fonts/CircularXXWeb-Bold.woff2") format("woff2");
-  font-family: "Circular";
+  src: url("fonts/Satoshi-Bold.woff2") format("woff2");
+  font-family: "Satoshi";
   font-weight: 700;
 }
 
 @font-face {
-  src: url("fonts/CircularXXMonoWeb-Regular.woff2") format("woff2");
-  font-family: "CircularMono";
-  font-weight: 400;
+  src: url("fonts/Satoshi-Black.woff2") format("woff2");
+  font-family: "Satoshi";
+  font-weight: 900;
 }
+

src/styles/text.css

@@ -1,22 +1,16 @@
 /* Constants */
 
 :root {
-  --fontFamily-base: "Circular", system-ui, -apple-system, Helvetica, Arial, sans-serif;
-  --fontFamily-monospace: "CircularMono", Courier, monospace, var(--fontFamily-base);
+  --fontFamily-base: "Satoshi", system-ui, -apple-system, Helvetica, Arial, sans-serif;
+  --fontFamily-monospace: Courier, monospace, var(--fontFamily-base);
 
   --fontWeight-base-0: 450;
   --fontWeight-base-1: 500;
   --fontWeight-base-2: 700;
-  --fontWeight-monospace: 400;
 
   --letter-spacing-base: -0.02em;
 
   /* New Typography system */
-
-  /**
-   * @size 10px/11px
-   * @weight 400
-   */
   --fontSize-tiny: 0.625rem; /* 10px/11px */
   --fontSize-mini: 0.75rem; /* 12px/13px */
   --fontSize-small: 0.8438rem; /* 13.5px/14.5px */