Merge pull request #772 from deckgo/studio-google-font-open-sans

studio: use Google Font "Open Sans" for the editor

Author: peterpeterparker

studio/src/app/components/core/app-footer/app-footer.scss

@@ -32,7 +32,7 @@ app-footer {
       padding-bottom: 6px;
 
       color: black;
-      font-weight: bold;
+      font-weight: 700;
     }
 
     ion-router-link {

studio/src/app/components/core/app-user-info/app-user-info.scss

@@ -27,7 +27,7 @@ app-user-info {
 
       ion-label:first-of-type {
         padding-bottom: 4px;
-        font-weight: 500;
+        font-weight: 400;
         font-size: var(--font-size-normal);
 
         width: 100%;

studio/src/app/components/editor/app-slot-type/app-slot-type.scss

@@ -15,7 +15,7 @@ app-slot-type {
     ion-item {
       h1,
       h2 {
-        font-weight: 500;
+        font-weight: 400;
       }
 
       h3 {

studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.scss

@@ -36,6 +36,10 @@ app-deck-fonts {
         p[slot="title"] {
           margin: 0;
           font-weight: normal;
+
+          &.default {
+            font-family: var(--font-family-default);
+          }
         }
       }
     }

studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx

@@ -100,7 +100,9 @@ export class AppDeckFonts {
     return (
       <div class={`item ${selected ? 'selected' : ''}`} custom-tappable onClick={() => this.selectFont(null)}>
         <deckgo-slide-title class="showcase">
-          <p slot="title">Default</p>
+          <p slot="title" class="default">
+            Default
+          </p>
         </deckgo-slide-title>
       </div>
     );

studio/src/app/components/landing/app-landing-deck/app-landing-deck.scss

@@ -3,13 +3,13 @@ app-landing-deck {
     --deckgo-highlight-code-font-size: 125%;
 
     h1 {
-      font-weight: 600;
+      font-weight: 700;
       margin-bottom: 0;
     }
 
     h2,
     h3 {
-      font-weight: 500;
+      font-weight: 400;
     }
 
     h1,

studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss

@@ -272,7 +272,7 @@ app-create-slide {
 
           width: 86%;
 
-          font-weight: 500;
+          font-weight: 400;
         }
       }
 

studio/src/global/theme/editor/editor-deck.scss

@@ -6,6 +6,8 @@ deckgo-deck {
   --pager-text-slides-display: block;
   --pager-text-color: black;
 
+  font-family: var(--font-family-default);
+
   h1,
   h2,
   h3,

studio/src/global/theme/fonts.scss

@@ -1,5 +1,9 @@
 :root {
-  --ion-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Open Sans", sans-serif;
+  --ion-font-family: "Open Sans", sans-serif;
+
+  --font-family-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 
@@ -15,19 +19,19 @@
 h1,
 h1 a {
   font-size: var(--font-size-h1);
-  font-weight: bold;
+  font-weight: 700;
 }
 
 h2,
 h2 a {
   font-size: var(--font-size-h2);
-  font-weight: bold;
+  font-weight: 700;
 }
 
 h3,
 h3 a {
   font-size: var(--font-size-h3);
-  font-weight: bold;
+  font-weight: 700;
 }
 
 h4,
@@ -52,7 +56,7 @@ ion-router-link,
   text-decoration: none;
   transition: border 0.3s;
   border-bottom: 1px solid transparent;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 p a:hover,

studio/src/global/theme/menu.scss

@@ -28,7 +28,7 @@ ion-menu {
         --background: transparent;
 
         --color: var(--ion-color-medium);
-        font-weight: bold;
+        font-weight: 700;
 
         &:not(:first-of-type) {
           margin-top: 8px;