diff --git a/fonts/Heebo-Black.ttf b/fonts/Heebo-Black.ttf new file mode 100644 index 000000000..cf4621661 Binary files /dev/null and b/fonts/Heebo-Black.ttf differ diff --git a/fonts/Heebo-Bold.ttf b/fonts/Heebo-Bold.ttf new file mode 100644 index 000000000..ed2c3399f Binary files /dev/null and b/fonts/Heebo-Bold.ttf differ diff --git a/fonts/Heebo-ExtraBold.ttf b/fonts/Heebo-ExtraBold.ttf new file mode 100644 index 000000000..bac567e88 Binary files /dev/null and b/fonts/Heebo-ExtraBold.ttf differ diff --git a/fonts/Heebo-Light.ttf b/fonts/Heebo-Light.ttf new file mode 100644 index 000000000..d3a65f710 Binary files /dev/null and b/fonts/Heebo-Light.ttf differ diff --git a/fonts/Heebo-Medium.ttf b/fonts/Heebo-Medium.ttf new file mode 100644 index 000000000..e83068928 Binary files /dev/null and b/fonts/Heebo-Medium.ttf differ diff --git a/fonts/Heebo-Regular.ttf b/fonts/Heebo-Regular.ttf new file mode 100644 index 000000000..d69308419 Binary files /dev/null and b/fonts/Heebo-Regular.ttf differ diff --git a/fonts/Heebo-Thin.ttf b/fonts/Heebo-Thin.ttf new file mode 100644 index 000000000..74690f4bf Binary files /dev/null and b/fonts/Heebo-Thin.ttf differ diff --git a/fonts/Karla-Bold.ttf b/fonts/Karla-Bold.ttf new file mode 100644 index 000000000..052231c16 Binary files /dev/null and b/fonts/Karla-Bold.ttf differ diff --git a/fonts/Karla-BoldItalic.ttf b/fonts/Karla-BoldItalic.ttf new file mode 100644 index 000000000..c19cfa541 Binary files /dev/null and b/fonts/Karla-BoldItalic.ttf differ diff --git a/fonts/Karla-Italic.ttf b/fonts/Karla-Italic.ttf new file mode 100644 index 000000000..bb70ac0cb Binary files /dev/null and b/fonts/Karla-Italic.ttf differ diff --git a/fonts/Karla-Regular.ttf b/fonts/Karla-Regular.ttf new file mode 100644 index 000000000..4269aa069 Binary files /dev/null and b/fonts/Karla-Regular.ttf differ diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 3af867ec2..ec714d1e3 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1248,7 +1248,7 @@ } .module-group-notification__contact { - font-family: 'SF Pro Text'; + font-family: 'Heebo'; font-weight: bold; } diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 0b3aa883e..dd04b656d 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -21,19 +21,45 @@ font-weight: bold; font-style: italic; } + +// Heebo is an open replacement for 'SF Pro Text' +@font-face { + font-family: 'Heebo'; + src: url('../fonts/Heebo-Regular.ttf') format('truetype'); +} +@font-face { + font-family: 'Heebo'; + src: url('../fonts/Heebo-Light.ttf') format('truetype'); + font-weight: lighter; +} @font-face { - font-family: 'Wasa'; - src: url('../fonts/Wasa-Bold.otf') format('opentype'); + font-family: 'Heebo'; + src: url('../fonts/Heebo-Bold.ttf') format('truetype'); font-weight: bold; } + +// Karla is an open replacement for 'Wasa' @font-face { - font-family: 'SF Pro Text'; - src: url('../fonts/SFProText-Regular.ttf') format('truetype'); + font-family: 'Karla'; + src: url('../fonts/Karla-Regular.ttf') format('truetype'); } @font-face { - font-family: 'SF Pro Display'; - src: url('../fonts/SFProDisplay-Regular.otf') format('opentype'); + font-family: 'Karla'; + src: url('../fonts/Karla-Bold.ttf') format('truetype'); + font-weight: bold; } +@font-face { + font-family: 'Karla'; + src: url('../fonts/Karla-Italic.ttf') format('truetype'); + font-style: italic; +} +@font-face { + font-family: 'Karla'; + src: url('../fonts/Karla-BoldItalic.ttf') format('truetype'); + font-weight: bold; + font-style: italic; +} + @keyframes fadein { from { opacity: 0; @@ -44,7 +70,8 @@ } // Session Colors -$session-font-family: 'Wasa'; +$session-font-accent: 'Heebo'; +$session-font-default: 'Karla'; $session-color-green: #00f782; $session-color-green-alt-1: #00f480; @@ -191,9 +218,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 +395,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 { @@ -461,7 +488,7 @@ $session_message-container-border-radius: 5px; .notification-count { position: absolute; font-size: $session-font-xs; - font-family: $session-font-family; + font-family: $session-font-default; top: 20px; right: 20px; width: 20px; @@ -500,14 +527,14 @@ $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; 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-accent; font-weight: 300; font-size: $session-font-xs; } @@ -719,7 +746,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; @@ -757,7 +784,7 @@ label { &__body { padding: 0px $session-margin-lg $session-margin-lg $session-margin-lg; - font-family: 'Wasa'; + font-family: $session-font-accent; line-height: $session-font-md; font-size: $session-font-sm; @@ -878,7 +905,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; @@ -1036,7 +1063,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-accent; font-weight: 100; color: rgba($session-color-white, 0.8); font-size: $session-font-md; @@ -1238,7 +1265,7 @@ label { } &__description { - font-family: 'SF Pro Text'; + font-family: $session-font-accent; font-size: $session-font-sm; font-weight: 100; max-width: 700px; @@ -1313,7 +1340,7 @@ label { text-align: center; font-size: $session-font-xl; letter-spacing: 5px; - font-family: 'SF Pro Text'; + font-family: $session-font-accent; } } } @@ -1348,7 +1375,7 @@ label { .discussion-container { .module-message { - font-family: 'SF Pro Text'; + font-family: $session-font-accent; border-radius: 5px; &__text--incoming { @@ -1561,7 +1588,7 @@ input { /* Memberlist */ .member-list-container .member { &-item { - font-family: 'SF Pro Text'; + font-family: $session-font-accent; padding: $session-margin-sm $session-margin-md; background-color: $session-shade-5; @@ -1628,7 +1655,7 @@ input { } &-container { - font-family: 'SF Pro Text'; + font-family: $session-font-accent; color: $session-color-white; display: inline-flex; flex-direction: column; @@ -1678,7 +1705,7 @@ input { text-align: center; font-size: 24px; letter-spacing: 5px; - font-family: 'SF Pro Text'; + font-family: $session-font-accent; } } } @@ -1712,7 +1739,7 @@ input { height: 400px; text-align: center; - font-family: 'SF Pro Text'; + font-family: $session-font-accent; } &__title h1 { @@ -1728,7 +1755,7 @@ input { } &__info { - font-family: 'Wasa'; + font-family: $session-font-default; margin-bottom: 2 * $session-margin-lg; &--title { @@ -1738,7 +1765,7 @@ input { } &--subtitle { - font-family: 'SF Pro Text'; + font-family: $session-font-accent; font-weight: 300; line-height: $session-font-md; opacity: 0.8; @@ -1799,7 +1826,7 @@ input { .session-member-item { cursor: pointer; - font-family: 'SF Pro Text'; + font-family: $session-font-accent; padding: 0px $session-margin-sm; height: 50px; display: flex; diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index b7a402f01..bbc1c09ba 100644 --- a/stylesheets/_session_left_pane.scss +++ b/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-accent; } .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-accent; &:focus { outline: none !important; @@ -658,7 +658,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-accent; font-size: $session-font-sm; } } diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index e0dce956c..c1443297b 100644 --- a/stylesheets/_session_signin.scss +++ b/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; diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 1dffb5817..a27cc917c 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -103,7 +103,7 @@ } @mixin session-h-title { - @include fontWasaBold(); + @include fontDefaultBold(); } h1 {