Added a new ":root" variable called "--syntax-js-default-font" (specifies the default font).

Author: William Troup

dist/syntax.js.css

@@ -5,6 +5,7 @@
  * Released under the MIT License
  */
 :root {
+  --syntax-js-default-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --syntax-js-color-keyword: #A71500;
   --syntax-js-color-value: #F28C28;
   --syntax-js-color-attribute: #730dd9;
@@ -54,7 +55,7 @@
 */
 code.syntax-highlight,
 div.syntax-highlight {
-  font-family: "Montserrat", sans-serif;
+  font-family: var(--syntax-js-default-font);
   font-size: 0.8rem;
 }
 code.syntax-highlight div.code,

dist/syntax.js.css.map

@@ -3,6 +3,7 @@
 ## Version 2.4.2:
 - All hover transition effects now work for hovering, and not hovering, which results in a smoother display.
 - Minor updates to the documentation.
+- Added a new ":root" variable called "--syntax-js-default-font" (specifies the default font).
 
 <br>
 

dist/syntax.js.min.css

@@ -9,6 +9,9 @@
 @import "foundation/styles";
 
 :root {
+    // Fonts
+    --syntax-js-default-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
     // Colors
     --syntax-js-color-keyword: #A71500;
     --syntax-js-color-value: #F28C28;
@@ -71,7 +74,7 @@
 
 code.syntax-highlight,
 div.syntax-highlight {
-    font-family: 'Montserrat', sans-serif;
+    font-family: var(--syntax-js-default-font);
     font-size: 0.8rem;
 
     div.code {