diff --git a/tools/install-build-deps b/tools/install-build-deps
index c51db76..43545f6 100755
--- a/tools/install-build-deps
+++ b/tools/install-build-deps
@@ -195,7 +195,7 @@
 # This variable is updated by tools/roll-catapult-trace-viewer.
 CATAPULT_SHA1 = 'ff5d8fd7244680b4d4456c25d5fdc04c76f9ef66'
 
-TYPEFACES_SHA1 = '756b0a015b8f99f5718f7fdf967d052c1ec55ab3'
+TYPEFACES_SHA1 = '4fb455de506f8a2859dc5264b8448c2559b08ab8'
 
 UI_DEPS = [
     ('buildtools/nodejs.tgz',
diff --git a/ui/BUILD.gn b/ui/BUILD.gn
index 115e8e9..b27e380 100644
--- a/ui/BUILD.gn
+++ b/ui/BUILD.gn
@@ -331,11 +331,11 @@
 
 copy("typefaces_dist") {
   sources = [
-    "../buildtools/typefaces/GoogleSans-Medium.woff2",
-    "../buildtools/typefaces/GoogleSans-Regular.woff2",
     "../buildtools/typefaces/MaterialIcons.woff2",
     "../buildtools/typefaces/Raleway-Regular.woff2",
     "../buildtools/typefaces/Raleway-Thin.woff2",
+    "../buildtools/typefaces/RobotoCondensed-Light.woff2",
+    "../buildtools/typefaces/RobotoCondensed-Regular.woff2",
     "../buildtools/typefaces/RobotoMono-Regular.woff2",
   ]
 
diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss
index cfccc3e..4a272b8 100644
--- a/ui/src/assets/common.scss
+++ b/ui/src/assets/common.scss
@@ -51,6 +51,21 @@
     content: $content;
 }
 
+
+@mixin track_shell_title() {
+  // line-height is deliberately 1px larger than font-size. Roboto seems to
+  // overflow on the bottom on "g"s otherwise.
+  font-size: 14px;
+  line-height: 15px;
+  max-height: 30px;
+  overflow: hidden;
+  text-align: left;
+  overflow-wrap: break-word;
+  font-family: 'Roboto Condensed', sans-serif;
+  font-weight: 300;
+  letter-spacing: -0.25px;
+}
+
 * {
     box-sizing: border-box;
     -webkit-tap-highlight-color: none;
@@ -77,9 +92,9 @@
 h1,
 h2,
 h3 {
-    font-family: initial;
-    font-size: initial;
-    font-weight: initial;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
     padding: 0;
     margin: 0;
 }
@@ -154,7 +169,7 @@
   word-wrap: break-word;
   font-weight: 400;
   font-size: 15px;
-  font-family: "Raleway";
+  font-family: 'Raleway', sans-serif;
   line-height: 1.5;
   padding: 10px 10px 0px 10px;
   width: 320px;
@@ -166,7 +181,7 @@
   word-wrap: break-word;
   font-weight: 400;
   font-size: 12px;
-  font-family: "Raleway";
+  font-family: 'Raleway', sans-serif;
   line-height: 1.5;
   padding: 10px 10px 10px 10px;
   width: 320px;
@@ -181,7 +196,7 @@
   grid-area: alerts;
   background-color: #f2f2f2;
   >div {
-    font-family: 'Raleway';
+    font-family: 'Raleway', sans-serif;
     font-weight: 400;
     letter-spacing: 0.25px;
     padding: 1rem;
@@ -251,13 +266,14 @@
 .query-error {
     padding: 20px 10px;
     color: hsl(-10, 50%, 50%);
-    font-family: 'Google Sans';
+    font-family: 'Roboto Condensed', sans-serif;
+    font-weight: 300;
 }
 
 .page header {
     background-color: hsl(213, 22%, 82%);
     color: hsl(213, 22%, 20%);
-    font-family: 'Google sans';
+    font-family: 'Roboto Condensed', sans-serif;
     font-size: 15px;
     font-weight: 400;
     padding: 4px 10px;
@@ -284,11 +300,12 @@
       grid-column: 1 / span 2;
       border-top: 1px solid var(--track-border-color);
       margin-top: -1px;
+      z-index: 2;
     }
 
     .track-shell {
         @include transition();
-        padding: 0 10px;
+        padding-left: 10px;
         display: grid;
         cursor: grab;
         grid-template-areas: "title pin";
@@ -315,18 +332,11 @@
 
         h1 {
             grid-area: title;
-            margin: 0;
-            font-size: 14px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            text-align: left;
-            white-space: nowrap;
-            font-family: 'Google Sans';
             color: hsl(213, 22%, 30%);
+            @include track_shell_title();
         }
         .track-button {
           @include transition();
-          margin: 0 5px;
           color: #495767;
           cursor: pointer;
           width: 24px;
@@ -550,12 +560,7 @@
     transition: background-color .4s;
     h1 {
       grid-area: title;
-      font-size: 14px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font-family: 'Google Sans';
-      white-space: nowrap;
-      text-align: left;
+      @include track_shell_title();
     }
     .fold-button {
       grid-area: fold-button;
diff --git a/ui/src/assets/details.scss b/ui/src/assets/details.scss
index f116981..4d0fd2c 100644
--- a/ui/src/assets/details.scss
+++ b/ui/src/assets/details.scss
@@ -32,7 +32,7 @@
       grid-area: tabs;
 
       .tab {
-        font-family: 'Google Sans';
+        font-family: 'Roboto Condensed', sans-serif;
         color: #3c4b5d;
         padding: 3px 10px 0px 10px;
         margin-top: 3px;
@@ -79,7 +79,8 @@
     }
 
     .handle-title {
-      font-family: 'Google Sans';
+      font-family: 'Roboto Condensed', sans-serif;
+      font-weight: 300;
       color: #3c4b5d;
       margin-left: 5px;
       padding: 5px;
@@ -90,7 +91,8 @@
 }
 
 .details-panel {
-  font-family: 'Google Sans';
+  font-family: 'Roboto Condensed', sans-serif;
+  font-weight: 300;
   color: #3c4b5d;
   .details-panel-heading {
     padding: 10px 0 5px 0;
@@ -106,7 +108,7 @@
     }
     h2 {
       font-size: 16px;
-      font-family: 'Google Sans';
+      font-weight: 400;
       padding: 0 10px;
       &.split {
         width: 50%;
@@ -218,7 +220,8 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  font-family: 'Google Sans';
+  font-family: 'Roboto Condensed', sans-serif;
+  font-weight: 300;
   color: #3c4b5d;
 
   .notes-editor-panel-heading-bar {
diff --git a/ui/src/assets/modal.scss b/ui/src/assets/modal.scss
index 24a8bfd..c46db21 100644
--- a/ui/src/assets/modal.scss
+++ b/ui/src/assets/modal.scss
@@ -16,7 +16,7 @@
   Basic Modal Styles
 \**************************/
 .modal {
-  font-family: 'Raleway';
+  font-family: 'Raleway', sans-serif;
 }
 
 .modal-overlay {
@@ -51,7 +51,7 @@
 .modal-title {
   margin-top: 0;
   margin-bottom: 0;
-  font-family: 'Raleway';
+  font-family: 'Raleway', sans-serif;
   font-weight: 600;
   font-size: 1.25rem;
   line-height: 1.25;
diff --git a/ui/src/assets/record.scss b/ui/src/assets/record.scss
index 2de7ccd..7600ebd 100644
--- a/ui/src/assets/record.scss
+++ b/ui/src/assets/record.scss
@@ -206,7 +206,7 @@
     padding: 0 1em;
     font-size: 15px;
     letter-spacing: 0.5px;
-    font-family: 'Raleway';
+    font-family: 'Raleway', sans-serif;
     font-weight: 600;
     color: #666;
     display: grid;
@@ -296,7 +296,7 @@
 
   >header {
     text-align: center;
-    font-family: 'Raleway';
+    font-family: 'Raleway', sans-serif;
     font-size: 20px;
     padding: 15px 10px;
     color: #333;
diff --git a/ui/src/assets/sidebar.scss b/ui/src/assets/sidebar.scss
index cf975f8..7cb1ce2 100644
--- a/ui/src/assets/sidebar.scss
+++ b/ui/src/assets/sidebar.scss
@@ -26,7 +26,7 @@
     }
     input[type=file] { display:none; }
     >header {
-        font-family: 'Raleway';
+        font-family: 'Raleway', sans-serif;
         height: var(--topbar-height);
         line-height: var(--topbar-height);
         vertical-align: middle;
@@ -88,7 +88,7 @@
                 cursor: pointer;
                 >h1,
                 >h2 {
-                    font-family: 'Raleway';
+                    font-family: 'Raleway', sans-serif;
                     letter-spacing: 0.25px;
                     overflow: hidden;
                     text-overflow: ellipsis;
@@ -143,7 +143,7 @@
                     line-height: 24px;
                     font-size: 14px;
                     font-weight: 400;
-                    font-family: 'Raleway';
+                    font-family: 'Raleway', sans-serif;
                     letter-spacing: 0.5px;
                     padding: 5px 24px;
                     text-decoration: none;
diff --git a/ui/src/assets/topbar.scss b/ui/src/assets/topbar.scss
index 49d7afb..49c06df 100644
--- a/ui/src/assets/topbar.scss
+++ b/ui/src/assets/topbar.scss
@@ -49,7 +49,8 @@
             border: 0;
             padding: 0 10px;
             font-size: 18px;
-            font-family: 'Google Sans';
+            font-family: 'Roboto Condensed', sans-serif;
+            font-weight: 300;
             color: #666;
             background-color: transparent;
             &:focus {
@@ -57,7 +58,7 @@
             }
             &::placeholder {
                 color: #b4b7ba;
-                font-family: 'Raleway';
+                font-family: 'Raleway', sans-serif;
                 font-weight: 400;
             }
         }
@@ -99,7 +100,8 @@
           display: flex;
           font: inherit;
           font-size: 14px;
-          font-family: 'Google Sans';
+          font-family: 'Roboto Condensed', sans-serif;
+          font-weight: 300;
           color: #aaa;
           .current {
             padding-right: 10px;
diff --git a/ui/src/assets/typefaces.scss b/ui/src/assets/typefaces.scss
index 19f8f9f..55a2712 100644
--- a/ui/src/assets/typefaces.scss
+++ b/ui/src/assets/typefaces.scss
@@ -1,48 +1,53 @@
-/* latin */
-@font-face {
-  font-family: 'Google Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Google Sans Regular'), local('GoogleSans-Regular'), url(assets/GoogleSans-Regular.woff2);
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin */
-@font-face {
-  font-family: 'Google Sans';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Google Sans Medium'), local('GoogleSans-Medium'), url(assets/GoogleSans-Medium.woff2);
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* fallback */
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src: url(assets/MaterialIcons.woff2) format('woff2');
 }
+
 /* latin */
 @font-face {
   font-family: 'Raleway';
   font-style: normal;
   font-weight: 100;
-  src: local('Raleway Thin'), local('Raleway-Thin'), url(assets/Raleway-Thin.woff2);
+  src: local('Raleway Thin'), local('Raleway-Thin'), url(assets/Raleway-Thin.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* latin */
 @font-face {
   font-family: 'Raleway';
   font-style: normal;
   font-weight: 400;
-  src: local('Raleway'), local('Raleway-Regular'), url(assets/Raleway-Regular.woff2);
+  src: local('Raleway'), local('Raleway-Regular'), url(assets/Raleway-Regular.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+/* latin */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url(assets/RobotoCondensed-Light.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(assets/RobotoCondensed-Regular.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 /* latin */
 @font-face {
   font-family: 'Roboto Mono';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(assets/RobotoMono-Regular.woff2);
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(assets/RobotoMono-Regular.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
diff --git a/ui/src/frontend/checkerboard.ts b/ui/src/frontend/checkerboard.ts
index 6ae9487..d271759 100644
--- a/ui/src/frontend/checkerboard.ts
+++ b/ui/src/frontend/checkerboard.ts
@@ -24,7 +24,7 @@
     leftPx: number,
     rightPx: number): void {
   const widthPx = rightPx - leftPx;
-  ctx.font = '12px Google Sans';
+  ctx.font = '12px Roboto Condensed';
   ctx.fillStyle = '#eee';
   ctx.fillRect(leftPx, 0, widthPx, heightPx);
   ctx.fillStyle = '#666';
diff --git a/ui/src/frontend/flamegraph.ts b/ui/src/frontend/flamegraph.ts
index 4d4dfd1..4c4d3e4 100644
--- a/ui/src/frontend/flamegraph.ts
+++ b/ui/src/frontend/flamegraph.ts
@@ -136,7 +136,7 @@
     // Draw root node.
     ctx.fillStyle = this.generateColor('root', false);
     ctx.fillRect(x, currentY, width, nodeHeight);
-    ctx.font = `${this.textSize}px Google Sans`;
+    ctx.font = `${this.textSize}px Roboto Condensed`;
     const text = cropText(
         `root: ${
             this.displaySize(
@@ -199,7 +199,7 @@
       }
 
       // Draw name.
-      ctx.font = `${this.textSize}px Google Sans`;
+      ctx.font = `${this.textSize}px Roboto Condensed`;
       const text = cropText(name, charWidth, width - 2);
       ctx.fillStyle = 'black';
       ctx.fillText(text, currentX + 5, currentY + nodeHeight - 4);
@@ -284,7 +284,7 @@
           height - rectHeight - 8 :
           this.hoveredY + 4;
 
-      ctx.font = '12px Google Sans';
+      ctx.font = '12px Roboto Condensed';
       ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
       ctx.fillRect(rectXStart, rectYStart, rectWidth, rectHeight);
       ctx.fillStyle = 'hsl(200, 50%, 40%)';
diff --git a/ui/src/frontend/overview_timeline_panel.ts b/ui/src/frontend/overview_timeline_panel.ts
index 215e8da..cfc6ee8 100644
--- a/ui/src/frontend/overview_timeline_panel.ts
+++ b/ui/src/frontend/overview_timeline_panel.ts
@@ -64,7 +64,7 @@
     const tracksHeight = size.height - headerHeight;
 
     // Draw time labels on the top header.
-    ctx.font = '10px Google Sans';
+    ctx.font = '10px Roboto Condensed';
     ctx.fillStyle = '#999';
     for (let i = 0; i < 100; i++) {
       const xPos =
diff --git a/ui/src/frontend/slice_panel.ts b/ui/src/frontend/slice_panel.ts
index 345b714..5f3553b 100644
--- a/ui/src/frontend/slice_panel.ts
+++ b/ui/src/frontend/slice_panel.ts
@@ -126,7 +126,7 @@
       ctx.fillRect(startDraw.x - 1, startDraw.y, 2, 100);
 
       // Wakeup explanation text.
-      ctx.font = '13px Google Sans';
+      ctx.font = '13px Roboto Condensed';
       ctx.fillStyle = '#3c4b5d';
       if (threadInfo) {
         const displayText = `Wakeup @ ${
@@ -153,7 +153,7 @@
         const explain2 =
             '(e.g. because of notifying a wait queue it was suspended on) to';
         const explain3 = 'when it started running.';
-        ctx.font = '10px Google Sans';
+        ctx.font = '10px Roboto Condensed';
         ctx.fillText(explain1, startDraw.x + 70, startDraw.y + 86 + 16);
         ctx.fillText(explain2, startDraw.x + 70, startDraw.y + 86 + 16 + 12);
         ctx.fillText(explain3, startDraw.x + 70, startDraw.y + 86 + 16 + 24);
diff --git a/ui/src/frontend/time_axis_panel.ts b/ui/src/frontend/time_axis_panel.ts
index 112c723..2f39881 100644
--- a/ui/src/frontend/time_axis_panel.ts
+++ b/ui/src/frontend/time_axis_panel.ts
@@ -32,7 +32,7 @@
     ctx.fillStyle = '#999';
 
     // Write trace offset time + line.
-    ctx.font = '12px Google Sans';
+    ctx.font = '12px Roboto Condensed';
 
     ctx.textAlign = 'right';
     const offsetTime =
@@ -44,7 +44,7 @@
     ctx.fillText(startTime + ' +', 6, 11);
 
     // Draw time axis.
-    ctx.font = '10px Google Sans';
+    ctx.font = '10px Roboto Condensed';
     for (const [x, time] of gridlines(size.width, range, timeScale)) {
       ctx.fillRect(x, 0, 1, size.height);
       ctx.fillText('+' + timeToString(time - range.start), x + 5, 10);
diff --git a/ui/src/frontend/time_selection_panel.ts b/ui/src/frontend/time_selection_panel.ts
index 3717a57..18ed125 100644
--- a/ui/src/frontend/time_selection_panel.ts
+++ b/ui/src/frontend/time_selection_panel.ts
@@ -76,7 +76,7 @@
 
   ctx.textBaseline = 'middle';
   ctx.fillStyle = '#222';
-  ctx.font = '10px Google Sans';
+  ctx.font = '10px Roboto Condensed';
   ctx.fillText(label, labelXLeft, yMid);
 }
 
@@ -105,7 +105,7 @@
 
   ctx.textBaseline = 'middle';
   ctx.fillStyle = '#222';
-  ctx.font = '10px Google Sans';
+  ctx.font = '10px Roboto Condensed';
   ctx.fillText(label, xPosLabel, yMid);
 }
 
diff --git a/ui/src/tracks/chrome_slices/frontend.ts b/ui/src/tracks/chrome_slices/frontend.ts
index 41f2541..8ceaf16 100644
--- a/ui/src/tracks/chrome_slices/frontend.ts
+++ b/ui/src/tracks/chrome_slices/frontend.ts
@@ -65,7 +65,7 @@
         timeScale.timeToPx(data.end),
     );
 
-    ctx.font = '12px Google Sans';
+    ctx.font = '12px Roboto Condensed';
     ctx.textAlign = 'center';
 
     // measuretext is expensive so we only use it once.
diff --git a/ui/src/tracks/counter/frontend.ts b/ui/src/tracks/counter/frontend.ts
index 3fcfe3e..6377414 100644
--- a/ui/src/tracks/counter/frontend.ts
+++ b/ui/src/tracks/counter/frontend.ts
@@ -154,7 +154,7 @@
     ctx.stroke();
     ctx.setLineDash([]);
 
-    ctx.font = '10px Google Sans';
+    ctx.font = '10px Roboto Condensed';
 
     if (this.hoveredValue !== undefined && this.hoveredTs !== undefined) {
       // TODO(hjd): Add units.
diff --git a/ui/src/tracks/cpu_freq/frontend.ts b/ui/src/tracks/cpu_freq/frontend.ts
index 0bf9199..2554521 100644
--- a/ui/src/tracks/cpu_freq/frontend.ts
+++ b/ui/src/tracks/cpu_freq/frontend.ts
@@ -126,7 +126,7 @@
       }
     }
 
-    ctx.font = '10px Google Sans';
+    ctx.font = '10px Roboto Condensed';
 
     if (this.hoveredValue !== undefined && this.hoveredTs !== undefined) {
       let text = `${this.hoveredValue.toLocaleString()}kHz`;
diff --git a/ui/src/tracks/cpu_slices/frontend.ts b/ui/src/tracks/cpu_slices/frontend.ts
index b77098d..d104fe9 100644
--- a/ui/src/tracks/cpu_slices/frontend.ts
+++ b/ui/src/tracks/cpu_slices/frontend.ts
@@ -112,7 +112,7 @@
     assertTrue(data.starts.length === data.utids.length);
 
     ctx.textAlign = 'center';
-    ctx.font = '12px Google Sans';
+    ctx.font = '12px Roboto Condensed';
     const charWidth = ctx.measureText('dbpqaouk').width / 8;
 
     for (let i = 0; i < data.starts.length; i++) {
@@ -171,10 +171,10 @@
       subTitle = cropText(subTitle, charWidth, rectWidth);
       const rectXCenter = rectStart + rectWidth / 2;
       ctx.fillStyle = '#fff';
-      ctx.font = '12px Google Sans';
+      ctx.font = '12px Roboto Condensed';
       ctx.fillText(title, rectXCenter, MARGIN_TOP + RECT_HEIGHT / 2 - 1);
       ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
-      ctx.font = '10px Google Sans';
+      ctx.font = '10px Roboto Condensed';
       ctx.fillText(subTitle, rectXCenter, MARGIN_TOP + RECT_HEIGHT / 2 + 9);
     }
 
@@ -251,7 +251,7 @@
         line1 = `T: ${hoveredThread.threadName} [${hoveredThread.tid}]`;
       }
 
-      ctx.font = '10px Google Sans';
+      ctx.font = '10px Roboto Condensed';
       const line1Width = ctx.measureText(line1).width;
       const line2Width = ctx.measureText(line2).width;
       const width = Math.max(line1Width, line2Width);
diff --git a/ui/src/tracks/gpu_freq/frontend.ts b/ui/src/tracks/gpu_freq/frontend.ts
index 53b79c7..5994cf6 100644
--- a/ui/src/tracks/gpu_freq/frontend.ts
+++ b/ui/src/tracks/gpu_freq/frontend.ts
@@ -106,7 +106,7 @@
     ctx.fill();
     ctx.stroke();
 
-    ctx.font = '10px Google Sans';
+    ctx.font = '10px Roboto Condensed';
 
     if (this.hoveredValue !== undefined && this.hoveredTs !== undefined) {
       let text = `Freq: ${this.hoveredValue.toLocaleString()}kHz`;
diff --git a/ui/src/tracks/process_scheduling/frontend.ts b/ui/src/tracks/process_scheduling/frontend.ts
index 78a0e86..9bc4f20 100644
--- a/ui/src/tracks/process_scheduling/frontend.ts
+++ b/ui/src/tracks/process_scheduling/frontend.ts
@@ -157,7 +157,7 @@
         line1 = `T: ${hoveredThread.threadName} [${hoveredThread.tid}]`;
       }
 
-      ctx.font = '10px Google Sans';
+      ctx.font = '10px Roboto Condensed';
       const line1Width = ctx.measureText(line1).width;
       const line2Width = ctx.measureText(line2).width;
       const width = Math.max(line1Width, line2Width);
diff --git a/ui/src/tracks/thread_state/frontend.ts b/ui/src/tracks/thread_state/frontend.ts
index 39dda44..0b01644 100644
--- a/ui/src/tracks/thread_state/frontend.ts
+++ b/ui/src/tracks/thread_state/frontend.ts
@@ -80,7 +80,7 @@
         const title = cropText(translateState(state), charWidth, rectWidth);
         const rectXCenter = rectStart + rectWidth / 2;
         ctx.fillStyle = color.l < 80 ? '#fff' : '#404040';
-        ctx.font = '10px Google Sans';
+        ctx.font = '10px Roboto Condensed';
         ctx.fillText(title, rectXCenter, MARGIN_TOP + RECT_HEIGHT / 2 + 3);
       }
     }