diff --git a/example/index.html b/example/index.html
index 2eeeca2e..94978744 100644
--- a/example/index.html
+++ b/example/index.html
@@ -5,6 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Demo</title>
+    <style>
+      body {
+        font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
+      }
+    </style>
   </head>
   <body>
     <div id="app"></div>
diff --git a/packages/griffith/src/components/Controller.styles.ts b/packages/griffith/src/components/Controller.styles.ts
index 45f3d638..a3af1ae9 100644
--- a/packages/griffith/src/components/Controller.styles.ts
+++ b/packages/griffith/src/components/Controller.styles.ts
@@ -80,6 +80,7 @@ export default StyleSheet.create({
     fontSize: '0.875em',
     color: 'rgba(255, 255, 255, 0.9)',
     boxSizing: 'content-box',
+    fontVariantNumeric: 'tabular-nums',
   },
 
   labelButton: {
diff --git a/packages/griffith/src/components/items/__tests__/__snapshots__/CombinedTimeItem.spec.tsx.snap b/packages/griffith/src/components/items/__tests__/__snapshots__/CombinedTimeItem.spec.tsx.snap
index 07ed07e5..53064d38 100644
--- a/packages/griffith/src/components/items/__tests__/__snapshots__/CombinedTimeItem.spec.tsx.snap
+++ b/packages/griffith/src/components/items/__tests__/__snapshots__/CombinedTimeItem.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`CombinedTimeItem get CombinedTimeItem component 1`] = `
 <div>
-  <div class="time_i860ms-o_O-fullScreenedTime_1xxtrer">00:06 / 03:02</div>
+  <div class="time_1n8zam0-o_O-fullScreenedTime_1xxtrer">00:06 / 03:02</div>
 </div>
 
 `;
