diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index bcb18b47..b8677768 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -96,11 +96,11 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
 
       <div className="p-2 font-medium">Implied probability</div>
       <Row>
-        <div className="px-2" style={{ fontFamily: 'sans-serif' }}>
+        <div className="px-2 font-sans">
           {Math.floor(initialProb * 1000) / 10 + '%'}
         </div>
         <div>→</div>
-        <div className="px-2" style={{ fontFamily: 'sans-serif' }}>
+        <div className="px-2 font-sans">
           {Math.floor(resultProb * 1000) / 10 + '%'}
         </div>
       </Row>
@@ -108,7 +108,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
       <Spacer h={2} />
 
       <div className="p-2 font-medium">Estimated winnings</div>
-      <div className="px-2" style={{ fontFamily: 'sans-serif' }}>
+      <div className="px-2 font-sans">
         {formatMoney(estimatedWinnings)} (+{estimatedReturnPercent})
       </div>
 
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 3a4c8354..a55ef759 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,12 +1,17 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
   mode: 'jit',
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    fontFamily: {
-      'major-mono': ['Major Mono Display', 'monospace'],
-      'readex-pro': ['Readex Pro', 'sans-serif'],
-    },
+    fontFamily: Object.assign(
+      { ...defaultTheme.fontFamily },
+      {
+        'major-mono': ['Major Mono Display', 'monospace'],
+        'readex-pro': ['Readex Pro', 'sans-serif'],
+      }
+    ),
     extend: {
       backgroundImage: {
         'world-trading': "url('/world-trading-background.jpg')",