use css variable for fonts

packages/app/src/components/PageEditor/CodeMirrorEditor.module.scss

@@ -1,4 +1,3 @@
-@use '~/styles/variables' as var;
 @use '~/styles/bootstrap/init' as bs;
 
 .grw-codemirror-editor :global {
@@ -17,7 +16,7 @@
     pre.CodeMirror-line.grw-cm-header-line {
       padding-top: 0.16em;
       padding-bottom: 0.08em;
-      font-family: bs.$font-family-monospace;
+      font-family: var(--font-family-monospace);
 
       // '#'
       .cm-formatting-header {
@@ -76,16 +75,6 @@
   .CodeMirror-hints {
     max-height: 30em !important;
 
-    .CodeMirror-hint.crowi-emoji-autocomplete {
-      font-family: var.$font-family-monospace-not-strictly;
-      line-height: 1.6em;
-
-      .img-container {
-        display: inline-block;
-        width: 30px;
-      }
-    }
-
     // active line
     .CodeMirror-hint-active.crowi-emoji-autocomplete {
       .img-container {

packages/app/src/components/PageEditor/Editor.module.scss

@@ -158,7 +158,7 @@
 .modal-gfm-cheatsheet :global {
   .modal-body {
     .hljs {
-      font-family: bs.$font-family-monospace;
+      font-family: var(--font-family-monospace);
     }
   }
 }

packages/app/src/styles/_create-page.scss

@@ -8,8 +8,4 @@
   .grw-btn-create-page {
     min-width: 90px;
   }
-
-  .create-page-under-tree-label code {
-    font-family: $font-family-monospace-not-strictly;
-  }
 }

packages/app/src/styles/_variables.scss

@@ -15,7 +15,7 @@ $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', Mei
 $grw-navbar-height: 52px;
 $grw-navbar-border-width: 3.3333px;
 // slightly larger than $zindex-sticky
-// https://getbootstrap.jp/docs/4.5/layout/overview/#z-index
+// https://getbootstrap.jp/docs/4.6/layout/overview/#z-index
 $grw-navbar-z-index: 1025;
 
 $grw-subnav-min-height: 95px;

packages/app/src/styles/bootstrap/_override.scss

@@ -1,7 +1,3 @@
-body {
-  font-family: $font-family-sans-serif;
-}
-
 * {
   outline: none !important;
 }

packages/app/src/styles/theme/mixins/_count-badge.scss

@@ -1,9 +1,7 @@
-@use '../../bootstrap/init' as bs;
-
 @mixin count-badge($color, $bg-color, $min-width: initial) {
   min-width: $min-width;
   padding: 0.1rem 0.5rem;
-  font-family: bs.$font-family-monospace;
+  font-family: var(--font-family-monospace);
   font-size: 12px;
   font-weight: 500;
   color: $color;