deckgo · peterpeterparker · Jun 27, 2020 · Jun 26, 2020
diff --git a/studio/src/app/components/core/app-footer/app-footer.scss b/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 {

diff --git a/studio/src/app/components/core/app-user-info/app-user-info.scss b/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%;

diff --git a/studio/src/app/components/editor/app-slot-type/app-slot-type.scss b/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 {

diff --git a/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.scss b/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);
+          }
         }
       }
     }

diff --git a/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx b/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>
     );

diff --git a/studio/src/app/components/landing/app-landing-deck/app-landing-deck.scss b/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,

diff --git a/studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss b/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;
         }
       }
 

diff --git a/studio/src/global/theme/editor/editor-deck.scss b/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,

diff --git a/studio/src/global/theme/fonts.scss b/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,

diff --git a/studio/src/global/theme/menu.scss b/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;

diff --git a/studio/src/index.html b/studio/src/index.html
@@ -110,6 +110,10 @@
 
     <link rel="manifest" href="/manifest.json" />
 
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
+
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300&display=swap" rel="stylesheet" />
+
     <style>
       :root {
         background: #f4f5f8;
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ app-slot-type { @@
         ion-item {
           h1,
           h2 {
-            font-weight: 500;
+            font-weight: 400;
           }
           h3 {
@@ Expand Down @@