Improve font loading

Include web fonts in loading.

packages/react-common-docs/public/theme.css

@@ -2,50 +2,102 @@
   font-family: 'Encode Sans';
   font-stretch: semi-expanded;
   font-weight: 400;
+  font-display: swap;
   src:
     local('Encode Sans Semi Expanded'),
-    local('Encode Sans');
+    local('Encode Sans'),
+    url(https://fonts.gstatic.com/s/encodesanssemiexpanded/v6/ke83OhAPMEZs-BDuzwftTNJ85JvwMOzE9d9Cca5TO401LgrjKXY.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Encode Sans';
   font-stretch: semi-expanded;
   font-weight: 700;
+  font-display: swap;
   src:
     local('Encode Sans Semi Expanded Bold'),
     local('Encode Sans Semi Expanded'),
-    local('Encode Sans');
+    local('Encode Sans'),
+    url(https://fonts.gstatic.com/s/encodesanssemiexpanded/v6/ke8yOhAPMEZs-BDuzwftTNJ85JvwMOzE9d9Cca5TMzYQOyfBJFyUGWQ.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Encode Sans';
   font-stretch: condensed;
   font-weight: 100;
+  font-display: swap;
   src:
     local('Encode Sans Condensed Thin'),
     local('Encode Sans Condensed'),
-    local('Encode Sans');
+    local('Encode Sans'),
+    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_76_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-5Z-OJwsnIHKQ.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Encode Sans';
   font-stretch: condensed;
   font-weight: 200;
+  font-display: swap;
   src:
     local('Encode Sans Condensed ExtraLight'),
     local('Encode Sans Condensed Extra Light'),
     local('Encode Sans Condensed'),
-    local('Encode Sans');
+    local('Encode Sans'),
+    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_46_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-SY6ZAC4ICHiYFQ.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Encode Sans';
   font-stretch: condensed;
   font-weight: 300;
+  font-display: swap;
   src:
     local('Encode Sans Condensed Light'),
     local('Encode Sans Condensed'),
-    local('Encode Sans');
+    local('Encode Sans'),
+    url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_46_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-LY2ZAC4ICHiYFQ.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'mononoki';
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local('mononoki'),
+    url(fonts/mononoki/mononoki-Regular.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'mononoki';
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local('mononoki Bold'),
+    local('mononoki'),
+    url(fonts/mononoki/mononoki-Bold.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'mononoki';
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+  src:
+    local('mononoki'),
+    url(fonts/mononoki/mononoki-Italic.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'mononoki';
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+  src:
+    local('mononoki Bold'),
+    local('mononoki'),
+    url(fonts/mononoki/mononoki-BoldItalic.woff2) format('woff2');
 }
 
 :root {

packages/react-common-docs/src/components/Sidebar/Sidebar.tsx

@@ -78,9 +78,10 @@ const SidebarToggle = styled('a')({
 
 const Actions = styled('div')({
   marginBottom: '4rem',
-  display: 'flex',
+  display: 'grid',
   gap: '1rem',
   alignItems: 'center',
+  gridTemplateColumns: 'auto auto',
 })
 
 const NavWrapper = styled('nav')({