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

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing to Trader-Fe
+# Contributing to V4-web
 We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
 
 - Reporting a bug
@@ -18,10 +18,10 @@ Pull requests are the best way to propose changes to the codebase (we use [Githu
 4. Issue that pull request!
 
 ## Any contributions you make will be under the same License
-When you submit code changes, your submissions are understood to be under the same [License](https://github.com/dydxprotocol/trader-fe/blob/master/LICENSE) that covers the project.
+When you submit code changes, your submissions are understood to be under the same [License](https://github.com/dydxprotocol/v4-web/blob/master/LICENSE) that covers the project.
 
-## Report bugs using Github's [issues](https://github.com/dydxprotocol/trader-fe/issues)
-Report a bug by [opening a new issue](https://github.com/dydxprotocol/trader-fe/issues/new).
+## Report bugs using Github's [issues](https://github.com/dydxprotocol/v4-web/issues)
+Report a bug by [opening a new issue](https://github.com/dydxprotocol/v4-web/issues/new).
 
 **Great Bug Reports** tend to have:
 

README.md

@@ -22,8 +22,8 @@ Alternatively, follow the [IPFS Kubo installation guide](https://docs.ipfs.tech
 Clone the repository and navigate to its directory:
 
 ```bash
-git clone https://github.com/dydxprotocol/trader-fe.git
-cd trader-fe
+git clone https://github.com/dydxprotocol/v4-web.git
+cd v4-web
 ```
 
 ### Step 2: Install pnpm and dependencies
@@ -102,3 +102,47 @@ To access your content on IPFS:
 2. **Public IPFS gateway:** Access your content via a public IPFS gateway, such as [https://dweb.link](https://dweb.link/) or [https://w3s.link/](https://w3s.link/). Use the gateway URL with your CID appended, like `https://dweb.link/ipfs/your_cid`.
 
 Replace `your_cid` with the actual CID.
+
+
+## Part 5: Customization
+
+### Using CircularXX font
+
+1. **Procure a license for CircularXX:** Visit [Lineto](https://lineto.com/shop/select?family=circular&set=DOPhtVQR-8m) and add `Circular/Family Package` + `Circular Mono/Regular` to your cart. Check the applicable boxes in the `Configure` step to fill out licensing information. After the `Payment` step, download the `.woff2` files.
+
+2. **Add the fonts to `v4-web`:** Add `CircularXXWeb-Bold.woff2`, `CircularXXWeb-Book.woff2`, `CircularXXWeb-Medium.woff2`, and `CircularXXMonoWeb-Regular.woff2` to the `src/styles/fonts` directory.
+
+3. **Add font-family to stylesheets:** In `src/styles/fonts.css`, add the following code to import your newly purchased `Circular` font.
+```css
+  @font-face {
+    src: url("fonts/CircularXXWeb-Book.woff2") format("woff2");
+    font-family: "Circular";
+    font-weight: 450;
+  }
+
+  @font-face {
+    src: url("fonts/CircularXXWeb-Medium.woff2") format("woff2");
+    font-family: "Circular";
+    font-weight: 500;
+  }
+
+  @font-face {
+    src: url("fonts/CircularXXWeb-Bold.woff2") format("woff2");
+    font-family: "Circular";
+    font-weight: 700;
+  }
+
+  @font-face {
+    src: url("fonts/CircularXXMonoWeb-Regular.woff2") format("woff2");
+    font-family: "CircularMono";
+    font-weight: 400;
+  }
+```
+
+In `src/styles/text.css`, update lines `4` and `5` to
+```css
+  --fontFamily-base: "Circular", "Satoshi", system-ui, -apple-system, Helvetica, Arial, sans-serif;
+  --fontFamily-monospace: "CircularMono", Courier, monospace, var(--fontFamily-base);
+```
+
+Enjoy the newly installed font.

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 */