Fix fontloader

owncloud · Aug 15, 2022 · cd51199 · cd51199
1 parent 5a24b77
commit cd51199
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 13 deletions.
diff --git a/config/docs.config.js b/config/docs.config.js
@@ -17,7 +17,7 @@ module.exports = {
     maxWidth: "100%",
     sidebarWidth: 240,
     fontFamily: {
-      base: ["'Nunito'", "sans-serif"],
+      base: ["'Nunito Sans'", "sans-serif"],
       monospace: ["Consolas", "'Liberation Mono'", "Menlo", "monospace"],
     },
   },

diff --git a/docs/docs.styles.scss b/docs/docs.styles.scss
@@ -231,7 +231,7 @@ p[class^="rsg--version"] {
   @include inset-squish-space($space-xs);
   margin: $space-xs 0 0;
   color: $color-bleu-de-france;
-  font-family: "Nunito", sans-serif;
+  font-family: "Nunito Sans", sans-serif;
   font-weight: $oc-docs-font-weight-normal;
   display: inline-block;
   line-height: $oc-docs-line-height-xsmall;
@@ -551,7 +551,7 @@ div[class^="rsg--root"] div[class^="rsg--tabs"] {
 
 // Status label is shown in top right corner for each component
 .status {
-  font-family: "Nunito", sans-serif;
+  font-family: "Nunito Sans", sans-serif;
   font-weight: $oc-docs-font-weight-normal;
   order: 1;
   align-self: flex-end;

diff --git a/docs/docs.tokens.json b/docs/docs.tokens.json
@@ -212,15 +212,15 @@
     "font_heading": {
       "type": "...",
       "category": "font",
-      "value": "'Nunito', sans-serif",
-      "originalValue": "'Nunito', sans-serif",
+      "value": "'Nunito Sans', sans-serif",
+      "originalValue": "'Nunito Sans', sans-serif",
       "name": "font_heading"
     },
     "font_text": {
       "type": "...",
       "category": "font",
-      "value": "'Nunito', sans-serif",
-      "originalValue": "'Nunito', sans-serif",
+      "value": "'Nunito Sans', sans-serif",
+      "originalValue": "'Nunito Sans', sans-serif",
       "name": "font_text"
     },
     "weight_bold": {

diff --git a/docs/docs.tokens.scss b/docs/docs.tokens.scss
@@ -33,8 +33,8 @@ $size-m: 16px !default;
 $size-s: 13px !default;
 $size-xs: 11px !default;
 
-$font-heading: "Nunito", sans-serif !default;
-$font-text: "Nunito", sans-serif !default;
+$font-heading: "Nunito Sans", sans-serif !default;
+$font-text: "Nunito Sans", sans-serif !default;
 
 $weight-bold: 700 !default;
 $weight-semi-bold: 600 !default;

diff --git a/src/styles/theme/oc-text.scss b/src/styles/theme/oc-text.scss
@@ -10,7 +10,7 @@ p {
 }
 
 html * {
-  font-family: Nunito, sans-serif;
+  font-family: Nunito Sans, sans-serif;
 }
 
 a {

diff --git a/src/system.js b/src/system.js
@@ -7,6 +7,7 @@
 
 import "./styles/styles.scss"
 import { getSizeClass } from "./utils/sizeClasses.js"
+import './utils/webFontLoader.js'
 
 const exportContext = ctx =>
   ctx.keys().reduce((acc, key) => {

diff --git a/src/tokens/docs/font.yaml b/src/tokens/docs/font.yaml
@@ -1,7 +1,7 @@
 ---
 font:
   text:
-    value: "'Nunito', sans-serif"
+    value: "'Nunito Sans', sans-serif"
   weight:
     bold:
       value: '700'

diff --git a/src/utils/webFontLoader.js b/src/utils/webFontLoader.js
@@ -6,6 +6,6 @@ import WebFont from "webfontloader"
 
 WebFont.load({
   google: {
-    families: ["Nunito:300,400,400i,600,700"],
-  },
+    families: ["Nunito Sans"],
+  }
 })