Use `--font-sans` in the Visual Editor widgets (#22085)

GitOrigin-RevId: 64a480562b3e7d2fda7d41ed402511290f800f14

services/web/frontend/js/features/source-editor/extensions/visual/pasted-content.tsx

@@ -81,7 +81,7 @@ const pastedContentTheme = EditorView.baseTheme({
     flexDirection: 'column',
     boxSizing: 'border-box',
     fontSize: '14px',
-    fontFamily: '"Lato", sans-serif',
+    fontFamily: 'var(--font-sans)',
   },
   '.ol-cm-pasted-content-menu-item': {
     color: 'inherit',

services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts

@@ -366,7 +366,7 @@ const mainVisualTheme = EditorView.theme({
   '.ol-cm-preamble-widget, .ol-cm-end-document-widget': {
     padding: '0.25em 1em',
     borderRadius: '8px',
-    fontFamily: '"Lato", sans-serif',
+    fontFamily: 'var(--font-sans)',
     fontSize: '14px',
     '.ol-cm-preamble-expanded &': {
       borderBottomLeftRadius: '0',

services/web/frontend/stylesheets/bootstrap-5/foundations/typography.scss

@@ -1,6 +1,7 @@
 // This file provides CSS variables for font size and line height, plus Sass variables for base text size for Bootstrap
 
 :root {
+  --font-sans: 'Noto Sans', sans-serif;
   --font-size-01: 0.75rem; // 12px
   --font-size-02: 0.875rem; // 14px
   --font-size-03: 1rem; // 16px