Default to sans-serif font

docs/_static/custom.js

@@ -44,7 +44,7 @@ function getRootAttributeToggle(attributeName, valueName) {
 }
 
 const settings = {
-  useSansFont: getRootAttributeToggle('font', 'sans'),
+  useSerifFont: getRootAttributeToggle('font', 'serif'),
   useDarkTheme: getRootAttributeToggle('theme', 'dark')
 };
 

docs/_static/style.css

@@ -18,7 +18,7 @@ Historically however, thanks to:
 
 /* CSS variables would go here */
 :root {
-  --font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif;
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
   /* base palette */
   --white: #ffffff;
@@ -104,8 +104,8 @@ Historically however, thanks to:
   --attribute-table-badge: var(--grey-7);
 }
 
-:root[data-font="sans"] {
+:root[data-font="serif"] {
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif;
 }
 
 :root[data-theme="dark"] {

docs/_templates/layout.html

@@ -142,10 +142,10 @@
       <h1>Settings</h1>
 
       <div class='setting'>
-        <h3>Use a sans-serif font:
+        <h3>Use a serif font:
           <label class="toggle"
-            title="Use a sans serif font? Your system font will be used, falling back to `sans-serif`.">
+            title="Use a serif font? Your system font will be used, falling back to serif.">
-            <input type="checkbox" name="useSansFont" onclick="updateSetting(this);">
+            <input type="checkbox" name="useSerifFont" onclick="updateSetting(this);">
             <span class="toggle-slider"></span>
           </label>
         </h3>