Merge pull request #1026 from vincentbavitz/fonts-open

Convert to open fonts

stylesheets/_modules.scss

@@ -1248,7 +1248,7 @@
 }
 
 .module-group-notification__contact {
-  font-family: 'SF Pro Text';
+  font-family: 'Public Sans';
   font-weight: bold;
 }
 

stylesheets/_session.scss

@@ -1,39 +1,64 @@
+// Fonts changed to 'Public Sans' and Space Mono' as per req. Chad.
+$session-font-default: 'Public Sans';
+$session-font-mono: 'SpaceMono';
+
 @font-face {
-  font-family: 'SpaceMono';
+  font-family: $session-font-mono;
   src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
 }
 
 @font-face {
-  font-family: 'SpaceMono';
+  font-family: $session-font-mono;
   src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
   font-weight: bold;
 }
 
 @font-face {
-  font-family: 'SpaceMono';
+  font-family: $session-font-mono;
   src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
   font-style: italic;
 }
 
 @font-face {
-  font-family: 'SpaceMono';
+  font-family: $session-font-mono;
   src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
   font-weight: bold;
   font-style: italic;
 }
+
+// Public Sans is an open replacement for 'SF Pro Text'
+@font-face {
+  font-family: $session-font-default;
+  src: url('../fonts/PublicSans-Regular.woff') format('woff');
+}
+@font-face {
+  font-family: $session-font-default;
+  src: url('../fonts/PublicSans-Italic.woff') format('woff');
+  font-style: italic;
+}
 @font-face {
-  font-family: 'Wasa';
-  src: url('../fonts/Wasa-Bold.otf') format('opentype');
+  font-family: $session-font-default;
+  src: url('../fonts/PublicSans-Bold.woff') format('woff');
   font-weight: bold;
 }
 @font-face {
-  font-family: 'SF Pro Text';
-  src: url('../fonts/SFProText-Regular.ttf') format('truetype');
+  font-family: $session-font-default;
+  src: url('../fonts/PublicSans-BoldItalic.woff') format('woff');
+  font-weight: bold;
+  font-style: italic;
+}
+@font-face {
+  font-family: $session-font-default;
+  src: url('../fonts/PublicSans-Light.woff') format('woff');
+  font-weight: lighter;
 }
 @font-face {
-  font-family: 'SF Pro Display';
-  src: url('../fonts/SFProDisplay-Regular.otf') format('opentype');
+  font-family: $session-font-default;
+  src: url('../fonts/PublicSans-LightItalic.woff') format('woff');
+  font-weight: lighter;
+  font-style: italic;
 }
+
 @keyframes fadein {
   from {
     opacity: 0;
@@ -44,8 +69,6 @@
 }
 
 // Session Colors
-$session-font-family: 'Wasa';
-
 $session-color-green: #00f782;
 $session-color-green-alt-1: #00f480;
 $session-color-green-alt-2: #00fd73;
@@ -191,9 +214,9 @@ $session-modal-size-lg: 650px;
 
 $session-conversation-header-height: 60px;
 
-@mixin fontWasaBold {
+@mixin fontDefaultBold {
   font-weight: bold;
-  font-family: $session-font-family;
+  font-family: $session-font-default;
 }
 
 * {
@@ -368,7 +391,7 @@ $session_message-container-border-radius: 5px;
     line-height: 40px;
     padding: 0px $session-margin-lg;
     font-size: $session-font-md;
-    font-family: $session-font-family;
+    font-family: $session-font-default;
     border-radius: 500px;
 
     &:not(.disabled):hover {
@@ -471,7 +494,7 @@ $session_message-container-border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: $session-font-family;
+  font-family: $session-font-default;
   border-radius: 50%;
   font-weight: 700;
   background: $session-color-danger;
@@ -521,16 +544,18 @@ $session-element-border-green: 4px solid $session-color-green;
 
 .module-conversation-header__title-flex,
 .module-conversation-header__title {
-  font-family: Wasa;
+  font-family: $session-font-default;
+  font-weight: bold;
   width: 100%;
   display: flex;
   font-size: $session-font-md;
 
   &-text {
     @include session-color-subtle($session-color-white);
-    font-family: 'SF Pro Text';
+    font-family: $session-font-default;
     font-weight: 300;
     font-size: $session-font-xs;
+    line-height: $session-font-xs;
   }
 
   .module-contact-name {
@@ -740,7 +765,7 @@ label {
 
     padding: $session-margin-lg;
 
-    font-family: 'Wasa';
+    font-family: $session-font-default;
     text-align: center;
     line-height: 18px;
     font-size: $session-font-md;
@@ -778,7 +803,7 @@ label {
 
   &__body {
     padding: 0px $session-margin-lg $session-margin-lg $session-margin-lg;
-    font-family: 'Wasa';
+    font-family: $session-font-default;
     line-height: $session-font-md;
     font-size: $session-font-sm;
 
@@ -923,7 +948,7 @@ label {
   background-color: $session-shade-4;
 
   color: $session-color-white;
-  font-family: 'Wasa';
+  font-family: $session-font-default;
   font-size: $session-font-sm;
   line-height: $session-icon-size-sm;
   font-weight: 700;
@@ -1081,7 +1106,7 @@ label {
       word-break: break-all;
       font-size: $session-font-md;
       padding: 0px $session-margin-lg;
-      font-family: 'SF Pro Text';
+      font-family: $session-font-default;
       font-weight: 100;
       color: rgba($session-color-white, 0.8);
       font-size: $session-font-md;
@@ -1283,7 +1308,7 @@ label {
     }
 
     &__description {
-      font-family: 'SF Pro Text';
+      font-family: $session-font-default;
       font-size: $session-font-sm;
       font-weight: 100;
       max-width: 700px;
@@ -1358,7 +1383,7 @@ label {
         text-align: center;
         font-size: $session-font-xl;
         letter-spacing: 5px;
-        font-family: 'SF Pro Text';
+        font-family: $session-font-default;
       }
     }
   }
@@ -1393,7 +1418,7 @@ label {
 
 .discussion-container {
   .module-message {
-    font-family: 'SF Pro Text';
+    font-family: $session-font-default;
     border-radius: 5px;
 
     &__text--incoming {
@@ -1606,7 +1631,7 @@ input {
 /* Memberlist */
 .member-list-container .member {
   &-item {
-    font-family: 'SF Pro Text';
+    font-family: $session-font-default;
     padding: $session-margin-sm $session-margin-md;
     background-color: $session-shade-5;
 
@@ -1671,7 +1696,7 @@ input {
     height: 400px;
 
     text-align: center;
-    font-family: 'SF Pro Text';
+    font-family: $session-font-default;
   }
 
   &__title h1 {
@@ -1687,7 +1712,7 @@ input {
   }
 
   &__info {
-    font-family: 'Wasa';
+    font-family: $session-font-default;
     margin-bottom: 2 * $session-margin-lg;
 
     &--title {
@@ -1697,7 +1722,7 @@ input {
     }
 
     &--subtitle {
-      font-family: 'SF Pro Text';
+      font-family: $session-font-default;
       font-weight: 300;
       line-height: $session-font-md;
       opacity: 0.8;
@@ -1737,7 +1762,7 @@ input {
   }
 
   &__no-contacts {
-    font-family: 'SpaceMono';
+    font-family: $session-font-mono;
     text-align: center;
     padding: 20px;
   }
@@ -1758,7 +1783,7 @@ input {
 
 .session-member-item {
   cursor: pointer;
-  font-family: 'SF Pro Text';
+  font-family: $session-font-default;
   padding: 0px $session-margin-sm;
   height: 50px;
   display: flex;

stylesheets/_session_left_pane.scss

@@ -112,7 +112,7 @@ $session-compose-margin: 20px;
   &__user__profile {
     &-number,
     &-name {
-      @include fontWasaBold();
+      @include fontDefaultBold();
       font-size: 15px;
 
       @at-root .light-theme #{&} {
@@ -193,7 +193,7 @@ $session-compose-margin: 20px;
 
     .session-button {
       margin-left: auto;
-      @include fontWasaBold();
+      @include fontDefaultBold();
     }
 
     &-buttons {
@@ -302,7 +302,7 @@ $session-compose-margin: 20px;
       font-size: $session-font-sm;
       line-height: $session-font-h3;
       margin: 0px 20px;
-      font-family: 'SF Pro Display';
+      font-family: $session-font-default;
     }
 
     .session-id-editable {
@@ -375,7 +375,7 @@ $session-compose-margin: 20px;
     border: none;
     flex-grow: 1;
     font-size: $session-font-sm;
-    font-family: 'SF Pro Text';
+    font-family: $session-font-default;
 
     &:focus {
       outline: none !important;
@@ -637,7 +637,7 @@ $session-compose-margin: 20px;
     border-radius: 50px;
     color: $session-color-light-grey;
     border: 1px solid $session-color-dark-grey;
-    font-family: 'SF Pro Text';
+    font-family: $session-font-default;
     font-size: $session-font-sm;
   }
 }

stylesheets/_session_signin.scss

@@ -17,7 +17,7 @@
 
       &-text {
         color: $session-color-white;
-        font-family: $session-font-family;
+        font-family: $session-font-default;
 
         .title {
           font-size: 100px;
@@ -87,7 +87,7 @@
     }
 
     &__tab {
-      @include fontWasaBold();
+      @include fontDefaultBold();
       width: 100%;
       padding-bottom: 10px;
       background-color: transparent;
@@ -244,7 +244,7 @@
       overflow-wrap: break-word;
       padding: 0px 5px 20px 5px;
       display: inline-block;
-      font-family: 'SpaceMono';
+      font-family: $session-font-mono;
       user-select: all;
     }
   }

stylesheets/_session_theme.scss

@@ -103,7 +103,7 @@
 }
 
 @mixin session-h-title {
-  @include fontWasaBold();
+  @include fontDefaultBold();
 }
 
 h1 {