diff --git a/components/trade/Orderbook.tsx b/components/trade/Orderbook.tsx
index 8e6390e9..354696a0 100644
--- a/components/trade/Orderbook.tsx
+++ b/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
-            style={{ fontFeatureSettings: 'zero 1' }}
-            className={`z-10 ml-4 text-right font-mono text-xs tabular-nums leading-5 md:leading-6 ${
-              /*hasOpenOrder*/ false ? 'text-th-primary' : 'text-th-fgd-3'
-            }`}
-            // onClick={handleSizeClick}
-          >
-            {formattedSize.toFixed(minOrderSizeDecimals)}
+          <div className="flex w-full justify-start pl-2">
+            <div
+              style={{ fontFeatureSettings: 'zero 1' }}
+              className={`z-10 w-16 text-right font-mono text-xs leading-5 md:leading-6 ${
+                /*hasOpenOrder*/ false ? 'text-th-primary' : ''
+              }`}
+              // onClick={handleSizeClick}
+            >
+              {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)}
diff --git a/pages/_document.tsx b/pages/_document.tsx
index ba73a645..b5784391 100644
--- a/pages/_document.tsx
+++ b/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
-            href="https://fonts.googleapis.com/css?family=Roboto Mono&display=swap"
+          {/* <link
+            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"
diff --git a/public/fonts/roboto.woff b/public/fonts/roboto.woff
new file mode 100644
index 00000000..54a642a5
Binary files /dev/null and b/public/fonts/roboto.woff differ
diff --git a/styles/globals.css b/styles/globals.css
index 012e49c9..a784cdb0 100644
--- a/styles/globals.css
+++ b/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;