font without slashed zero

components/trade/Orderbook.tsx

@@ -382,7 +382,7 @@ const Orderbook = ({ depth = 12 }) => {
         </Tooltip>
       </div>
       <div className="flex items-center justify-between px-4 pb-2 text-xs text-th-fgd-4">
-        <div>Size</div>
+        <div className="pl-4">Size</div>
         <div>Price</div>
       </div>
       <div className="">
@@ -535,17 +535,19 @@ const OrderbookRow = ({
     >
       <>
         <div className="flex w-full items-center justify-between hover:bg-th-bkg-2">
-          <div
+          <div className="flex w-full justify-start pl-2">
-            style={{ fontFeatureSettings: 'zero 1' }}
+            <div
-            className={`z-10 ml-4 text-right font-mono text-xs tabular-nums leading-5 md:leading-6 ${
+              style={{ fontFeatureSettings: 'zero 1' }}
-              /*hasOpenOrder*/ false ? 'text-th-primary' : 'text-th-fgd-3'
+              className={`z-10 w-16 text-right font-mono text-xs leading-5 md:leading-6 ${
-            }`}
+                /*hasOpenOrder*/ false ? 'text-th-primary' : ''
-            // onClick={handleSizeClick}
+              }`}
-          >
+              // onClick={handleSizeClick}
-            {formattedSize.toFixed(minOrderSizeDecimals)}
+            >
+              {formattedSize.toFixed(minOrderSizeDecimals)}
+            </div>
           </div>
           <div
-            className={`z-10 pr-4 font-mono text-xs tabular-nums  leading-5 text-th-fgd-3 hover:normal-nums md:leading-6`}
+            className={`z-10 w-full pr-4 text-right font-mono text-xs leading-5 md:leading-6`}
             // onClick={handlePriceClick}
           >
             {formattedPrice.toFixed(groupingDecimalCount)}

pages/_document.tsx

@@ -10,10 +10,10 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Lato:wght@200;300;400;500;600;700&display=swap"
             rel="stylesheet"
           />
-          <link
+          {/* <link
-            href="https://fonts.googleapis.com/css?family=Roboto Mono&display=swap"
+            href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap"
             rel="stylesheet"
-          ></link>
+          ></link> */}
           <Script
             src="/datafeeds/udf/dist/bundle.js"
             strategy="beforeInteractive"

styles/globals.css

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("/fonts/roboto.woff");
+}
+
 /* Reset */
 
 html,
@@ -266,6 +271,11 @@ table p {
 
 /* Scrollbars */
 
+.font-mono {
+  -webkit-font-feature-settings: "zero" 1;
+  font-feature-settings: "zero" 1;
+}
+
 .hide-scroll::-webkit-scrollbar {
   width: 0px;
   height: 0px;