✨ feat(_config.scss): Add option to specify custom font family for pr…

…imary and secondary fonts, remove auto-import for fonts for GDPR compliance
Spiderpig86 · May 26, 2022 · dfaadb1 · dfaadb1
1 parent 41edc21
commit dfaadb1
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 62 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
@@ -4,10 +4,6 @@
 * https://spiderpig86.github.io/Cirrus
 */
 @charset "UTF-8";
-/* BASE STYLING + RESET FOR CIRRUS */
-@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Nunito+Sans:400,700");
-@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");
-@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
 /* v1 Color scheme for Cirrus */
 /*
   Functions
@@ -81,6 +77,7 @@
  *       }
  */
 /* VALUE APIS */
+/* BASE STYLING + RESET FOR CIRRUS */
 :root {
   /* v1 Colors */
   --cirrus-fg: #0f172a;
@@ -446,39 +443,39 @@ fieldset legend {
 /* Headers */
 h6 {
   font-size: 1.25rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h5 {
   font-size: 1.5rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h4 {
   font-size: 1.75rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h3 {
   font-size: 2rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h2 {
   font-size: 2.5rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
@@ -487,7 +484,7 @@ h2 {
 h1 {
   font-size: 3rem;
   letter-spacing: 0.025rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
@@ -579,11 +576,11 @@ mark,
 }
 
 .font-primary {
-  font-family: "Montserrat";
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 .font-alt, .font-secondary {
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 .content h1 {
@@ -11316,7 +11313,7 @@ video.video-fullscreen {
   font-weight: inherit;
   letter-spacing: 0.03rem;
   text-transform: uppercase;
-  font-family: Montserrat;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   min-width: 2rem;
   user-select: none;
   margin-bottom: 1rem;
@@ -11894,7 +11891,7 @@ select {
   width: 100%;
   border: 1px solid #dee2e6;
   border-radius: 3px;
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: var(--font-size-m);
   letter-spacing: 0.02rem;
   transition: all 0.3s;
@@ -12049,7 +12046,7 @@ textarea[type=text] {
   width: 100%;
   border: 1px solid #dee2e6;
   border-radius: 3px;
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: var(--font-size-m);
   letter-spacing: 0.02rem;
   transition: all 0.3s;
@@ -12207,7 +12204,7 @@ select {
   width: 100%;
   border: 1px solid #dee2e6;
   border-radius: 3px;
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: var(--font-size-m);
   letter-spacing: 0.02rem;
   transition: all 0.3s;

diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -3,10 +3,6 @@
 * Stanley Lim, Copyright 2022
 * https://spiderpig86.github.io/Cirrus
 */
-/* BASE STYLING + RESET FOR CIRRUS */
-@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Nunito+Sans:400,700");
-@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");
-@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
 /* v1 Color scheme for Cirrus */
 /*
   Functions
@@ -80,6 +76,7 @@
  *       }
  */
 /* VALUE APIS */
+/* BASE STYLING + RESET FOR CIRRUS */
 :root {
   /* v1 Colors */
   --cirrus-fg: #0f172a;
@@ -445,39 +442,39 @@ fieldset legend {
 /* Headers */
 h6 {
   font-size: 1.25rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h5 {
   font-size: 1.5rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h4 {
   font-size: 1.75rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h3 {
   font-size: 2rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h2 {
   font-size: 2.5rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
@@ -486,7 +483,7 @@ h2 {
 h1 {
   font-size: 3rem;
   letter-spacing: 0.025rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
@@ -578,11 +575,11 @@ mark,
 }
 
 .font-primary {
-  font-family: "Montserrat";
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 .font-alt, .font-secondary {
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 .content h1 {
@@ -10215,7 +10212,7 @@ video.video-fullscreen {
   font-weight: inherit;
   letter-spacing: 0.03rem;
   text-transform: uppercase;
-  font-family: Montserrat;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   min-width: 2rem;
   user-select: none;
   margin-bottom: 1rem;
@@ -10793,7 +10790,7 @@ select {
   width: 100%;
   border: 1px solid #dee2e6;
   border-radius: 3px;
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: var(--font-size-m);
   letter-spacing: 0.02rem;
   transition: all 0.3s;
@@ -10948,7 +10945,7 @@ textarea[type=text] {
   width: 100%;
   border: 1px solid #dee2e6;
   border-radius: 3px;
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: var(--font-size-m);
   letter-spacing: 0.02rem;
   transition: all 0.3s;
@@ -11106,7 +11103,7 @@ select {
   width: 100%;
   border: 1px solid #dee2e6;
   border-radius: 3px;
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: var(--font-size-m);
   letter-spacing: 0.02rem;
   transition: all 0.3s;

diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -4,10 +4,6 @@
 * https://spiderpig86.github.io/Cirrus
 */
 @charset "UTF-8";
-/* BASE STYLING + RESET FOR CIRRUS */
-@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Nunito+Sans:400,700");
-@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");
-@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
 /* v1 Color scheme for Cirrus */
 /*
   Functions
@@ -81,6 +77,7 @@
  *       }
  */
 /* VALUE APIS */
+/* BASE STYLING + RESET FOR CIRRUS */
 :root {
   /* v1 Colors */
   --cirrus-fg: #0f172a;
@@ -446,39 +443,39 @@ fieldset legend {
 /* Headers */
 h6 {
   font-size: 1.25rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h5 {
   font-size: 1.5rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h4 {
   font-size: 1.75rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h3 {
   font-size: 2rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
 }
 
 h2 {
   font-size: 2.5rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
@@ -487,7 +484,7 @@ h2 {
 h1 {
   font-size: 3rem;
   letter-spacing: 0.025rem;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1rem;
@@ -579,11 +576,11 @@ mark,
 }
 
 .font-primary {
-  font-family: "Montserrat";
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 .font-alt, .font-secondary {
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 .content h1 {
@@ -10216,7 +10213,7 @@ video.video-fullscreen {
   font-weight: inherit;
   letter-spacing: 0.03rem;
   text-transform: uppercase;
-  font-family: Montserrat;
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   min-width: 2rem;
   user-select: none;
   margin-bottom: 1rem;
@@ -10794,7 +10791,7 @@ select {
   width: 100%;
   border: 1px solid #dee2e6;
   border-radius: 3px;
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: var(--font-size-m);
   letter-spacing: 0.02rem;
   transition: all 0.3s;
@@ -10949,7 +10946,7 @@ textarea[type=text] {
   width: 100%;
   border: 1px solid #dee2e6;
   border-radius: 3px;
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: var(--font-size-m);
   letter-spacing: 0.02rem;
   transition: all 0.3s;
@@ -11107,7 +11104,7 @@ select {
   width: 100%;
   border: 1px solid #dee2e6;
   border-radius: 3px;
-  font-family: "Nunito Sans";
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: var(--font-size-m);
   letter-spacing: 0.02rem;
   transition: all 0.3s;

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/base/default.scss b/src/base/default.scss
@@ -1,6 +1,5 @@
 /* BASE STYLING + RESET FOR CIRRUS */
 @use '../internal' as *;
-@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Nunito+Sans:400,700');
 
 :root {
     /* v1 Colors */
@@ -89,8 +88,7 @@ $generate-reset: should-generate-classes($RESET);
         line-height: 1.8; /* Globally adjust line height */
         font-size: 1rem;
         font-weight: 400;
-        font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial,
-            sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        font-family: map-get($map: $font-families, $key: secondary);
         color: var(--cirrus-fg);
     }