Localize fonts

Signed-off-by: Ajay Bura <ajbura@gmail.com>

public/index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
-    <link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap" rel="stylesheet">
     <title>Cinny</title>
     <meta name="name"        content="Cinny">
     <meta name="author"      content="Ajay Bura">

public/res/fonts/roboto/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

src/app/atoms/avatar/Avatar.jsx

@@ -32,7 +32,7 @@ function Avatar({
                 iconSrc !== null
                   ? <RawIcon size={size} src={iconSrc} />
                   : text !== null && (
-                    <Text variant={textSize}>
+                    <Text variant={textSize} primary>
                       {twemojify([...text][0])}
                     </Text>
                   )

src/app/atoms/badge/NotificationBadge.jsx

@@ -8,7 +8,7 @@ function NotificationBadge({ alert, content }) {
   const notificationClass = alert ? ' notification-badge--alert' : '';
   return (
     <div className={`notification-badge${notificationClass}`}>
-      {content !== null && <Text variant="b3">{content}</Text>}
+      {content !== null && <Text variant="b3" weight="bold">{content}</Text>}
     </div>
   );
 }

src/app/atoms/badge/NotificationBadge.scss

@@ -8,7 +8,6 @@
   .text {
     color: var(--tc-badge);
     text-align: center;
-    font-weight: 700;
   }
 
   &--alert {

src/app/atoms/divider/Divider.jsx

@@ -8,7 +8,7 @@ function Divider({ text, variant, align }) {
   const dividerClass = ` divider--${variant} divider--${align}`;
   return (
     <div className={`divider${dividerClass}`}>
-      {text !== null && <Text className="divider__text" variant="b3">{text}</Text>}
+      {text !== null && <Text className="divider__text" variant="b3" weight="bold">{text}</Text>}
     </div>
   );
 }

src/app/atoms/divider/Divider.scss

@@ -22,7 +22,6 @@
   &__text {
     padding: 2px var(--sp-extra-tight);
     border-radius: calc(var(--bo-radius) / 2);
-    font-weight: 500;
   }
 }
 

src/app/atoms/text/Text.jsx

@@ -3,25 +3,37 @@ import PropTypes from 'prop-types';
 import './Text.scss';
 
 function Text({
-  id, className, variant, children,
+  className, variant, weight,
+  primary, span, children,
 }) {
-  const cName = className !== '' ? `${className} ` : '';
+  const classes = [];
-  if (variant === 'h1') return <h1 id={id === '' ? undefined : id} className={`${cName}text text-h1`}>{ children }</h1>;
+  if (className) classes.push(className);
-  if (variant === 'h2') return <h2 id={id === '' ? undefined : id} className={`${cName}text text-h2`}>{ children }</h2>;
+
-  if (variant === 's1') return <h4 id={id === '' ? undefined : id} className={`${cName}text text-s1`}>{ children }</h4>;
+  classes.push(`text text-${variant} text-${weight}`);
-  return <p id={id === '' ? undefined : id} className={`${cName}text text-${variant}`}>{ children }</p>;
+  if (primary) classes.push('text-primary');
+
+  const textClass = classes.join(' ');
+  if (span) return <span className={classes.join(' ')}>{ children }</span>;
+  if (variant === 'h1') return <h1 className={textClass}>{ children }</h1>;
+  if (variant === 'h2') return <h2 className={textClass}>{ children }</h2>;
+  if (variant === 's1') return <h4 className={textClass}>{ children }</h4>;
+  return <p className={textClass}>{ children }</p>;
 }
 
 Text.defaultProps = {
-  id: '',
+  className: null,
-  className: '',
   variant: 'b1',
+  weight: 'normal',
+  primary: false,
+  span: false,
 };
 
 Text.propTypes = {
-  id: PropTypes.string,
   className: PropTypes.string,
   variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
+  weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
+  primary: PropTypes.bool,
+  span: PropTypes.bool,
   children: PropTypes.node.isRequired,
 };
 

src/app/atoms/text/Text.scss

@@ -1,7 +1,5 @@
-@mixin font($type, $weight) {
+@mixin font($type) {
-  
   font-size: var(--fs-#{$type});
-  font-weight: $weight;
   letter-spacing: var(--ls-#{$type});
   line-height: var(--lh-#{$type});
 
@@ -11,7 +9,7 @@
   }
 }
 
-%text {
+.text {
   margin: 0;
   padding: 0;
   color: var(--tc-surface-high);
@@ -26,30 +24,45 @@
   }
 }
 
+.text-primary {
+  font-family: var(--font-primary);
+  
+  --fw-light: var(--p-fw-light);
+  --fw-normal: var(--p-fw-normal);
+  --fw-medium: var(--p-fw-medium);
+  --fw-bold: var(--p-fw-bold);
+}
+.text-light {
+  font-weight: var(--fw-light);
+}
+.text-normal {
+  font-weight: var(--fw-normal);
+}
+.text-medium {
+  font-weight: var(--fw-medium);
+}
+.text-bold {
+  font-weight: var(--fw-bold);
+}
+
 .text-h1 {
-  @extend %text;
+  @include font(h1);
-  @include font(h1, 500);
 }
 .text-h2 {
-  @extend %text;
+  @include font(h2);
-  @include font(h2, 500);
 }
 .text-s1 {
-  @extend %text;
+  @include font(s1);
-  @include font(s1, 400);
 }
 .text-b1 {
-  @extend %text;
+  @include font(b1);
-  @include font(b1, 400);
   color: var(--tc-surface-normal);
 }
 .text-b2 {
-  @extend %text;
+  @include font(b2);
-  @include font(b2, 400);
   color: var(--tc-surface-normal);
 }
 .text-b3 {
-  @extend %text;
+  @include font(b3);
-  @include font(b3, 400);
   color: var(--tc-surface-low);
 }

src/app/molecules/dialog/Dialog.jsx

@@ -27,7 +27,7 @@ function Dialog({
         <div className="dialog__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{twemojify(title)}</Text>
+              <Text variant="h2" weight="medium" primary>{twemojify(title)}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>

src/app/molecules/image-upload/ImageUpload.jsx

@@ -53,7 +53,7 @@ function ImageUpload({
           size="large"
         />
         <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
-          {uploadPromise === null && <Text variant="b3">Upload</Text>}
+          {uploadPromise === null && <Text variant="b3" weight="bold">Upload</Text>}
           {uploadPromise !== null && <Spinner size="small" />}
         </div>
       </button>

src/app/molecules/image-upload/ImageUpload.scss

@@ -24,7 +24,6 @@
 		z-index: 1;
 		& .text {
 			text-transform: uppercase;
-			font-weight: 600;
 			color: white;
 		}
 		&--stopped {

src/app/molecules/message/Message.jsx

@@ -70,8 +70,8 @@ const MessageHeader = React.memo(({
 }) => (
   <div className="message__header">
     <div style={{ color: colorMXID(userId) }} className="message__profile">
-      <Text variant="b1">{twemojify(username)}</Text>
+      <Text variant="b1" weight="medium">{twemojify(username)}</Text>
-      <Text variant="b1">{twemojify(userId)}</Text>
+      <Text variant="b1" weight="medium">{twemojify(userId)}</Text>
     </div>
     <div className="message__time">
       <Text variant="b3">{time}</Text>

src/app/molecules/message/Message.scss

@@ -130,7 +130,6 @@
 
     & > .text {
       color: inherit;
-      font-weight: 500;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -192,7 +191,7 @@
     padding: 0 2px;
     border-radius: 4px;
     cursor: pointer;
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     &:hover {
       background-color: hsla(0, 0%, 64%, 0.3);
       color: var(--tc-surface-high);

src/app/molecules/popup-window/PopupWindow.jsx

@@ -68,7 +68,7 @@ function PopupWindow({
             <Header>
               <IconButton size="small" src={ChevronLeftIC} onClick={onRequestClose} tooltip="Back" />
               <TitleWrapper>
-                <Text variant="s1">{twemojify(title)}</Text>
+                <Text variant="s1" weight="medium" primary>{twemojify(title)}</Text>
               </TitleWrapper>
               {drawerOptions}
             </Header>
@@ -84,7 +84,7 @@ function PopupWindow({
         <div className="pw__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
+              <Text variant="h2" weight="medium" primary>{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>

src/app/molecules/popup-window/PopupWindow.scss

@@ -53,10 +53,11 @@
   & .header {
     padding-left: var(--sp-tight);
     & .header__title-wrapper {
-      margin: 0 var(--sp-extra-tight);
+      margin: 0 var(--sp-extra-tight) 0 var(--sp-ultra-tight);
     }
     [dir=rtl] & {
-        padding-right: var(--sp-tight);
+      padding-right: var(--sp-tight);
+      margin: 0 var(--sp-ultra-tight) 0 var(--sp-extra-tight);
     }
   }
 }

src/app/molecules/room-intro/RoomIntro.jsx

@@ -15,7 +15,7 @@ function RoomIntro({
     <div className="room-intro">
       <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
       <div className="room-intro__content">
-        <Text className="room-intro__name" variant="h1">{twemojify(heading)}</Text>
+        <Text className="room-intro__name" variant="h1" weight="medium" primary>{twemojify(heading)}</Text>
         <Text className="room-intro__desc" variant="b1">{twemojify(desc, undefined, true)}</Text>
         { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
       </div>

src/app/molecules/room-selector/RoomSelector.jsx

@@ -58,13 +58,13 @@ function RoomSelector({
             iconSrc={iconSrc}
             size="extra-small"
           />
-          <Text variant="b1">
+          <Text variant="b1" weight={isUnread ? 'medium' : 'normal'}>
             {twemojify(name)}
             {parentName && (
-              <span className="text text-b3">
+              <Text variant="b3" span>
                 {' — '}
                 {twemojify(parentName)}
-              </span>
+              </Text>
             )}
           </Text>
           { isUnread && (

src/app/molecules/room-selector/RoomSelector.scss

@@ -17,7 +17,6 @@
 
   &--unread {
     .room-selector__content > .text {
-      font-weight: 500;
       color: var(--tc-surface-high);
     }
   }

src/app/organisms/emoji-board/EmojiBoard.jsx

@@ -61,7 +61,7 @@ function EmojiGroup({ name, groupEmojis }) {
 
   return (
     <div className="emoji-group">
-      <Text className="emoji-group__header" variant="b2">{name}</Text>
+      <Text className="emoji-group__header" variant="b2" weight="bold">{name}</Text>
       {groupEmojis.length !== 0 && <div className="emoji-set">{getEmojiBoard()}</div>}
     </div>
   );

src/app/organisms/emoji-board/EmojiBoard.scss

@@ -101,7 +101,6 @@
     margin-left: var(--sp-extra-tight);
     padding: var(--sp-extra-tight) var(--sp-ultra-tight);
     text-transform: uppercase;
-    font-weight: 600;
     box-shadow: 0 -4px 0 0 var(--bg-surface);
     border-bottom: 1px solid var(--bg-surface-border);
     [dir=rtl] & {

src/app/organisms/invite-list/InviteList.jsx

@@ -89,7 +89,7 @@ function InviteList({ isOpen, onRequestClose }) {
       <div className="invites-content">
         { initMatrix.roomList.inviteDirects.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Direct Messages</Text>
+            <Text variant="b3" weight="bold">Direct Messages</Text>
           </div>
         )}
         {
@@ -117,14 +117,14 @@ function InviteList({ isOpen, onRequestClose }) {
         }
         { initMatrix.roomList.inviteSpaces.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Spaces</Text>
+            <Text variant="b3" weight="bold">Spaces</Text>
           </div>
         )}
         { Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) }
 
         { initMatrix.roomList.inviteRooms.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Rooms</Text>
+            <Text variant="b3" weight="bold">Rooms</Text>
           </div>
         )}
         { Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }

src/app/organisms/invite-list/InviteList.scss

@@ -7,7 +7,6 @@
 
     & .text {
       text-transform: uppercase;
-      font-weight: 600;
     }
     &:first-child {
       margin-top: var(--sp-tight);

src/app/organisms/navigation/Drawer.scss

@@ -18,10 +18,6 @@
     border-left: 1px solid var(--bg-surface-border);
   }
 
-  & .header__title-wrapper .text {
-    font-weight: 500;
-  }
-
   &__content-wrapper {
     @extend .drawer-flexItem;
     @extend .drawer-flexBox;
@@ -79,6 +75,5 @@
     margin: var(--sp-normal);
     margin-bottom: var(--sp-extra-tight);
     text-transform: uppercase;
-    font-weight: 600;
   }
 }

src/app/organisms/navigation/DrawerHeader.jsx

@@ -32,7 +32,7 @@ function DrawerHeader({ selectedTab, spaceId }) {
   return (
     <Header>
       <TitleWrapper>
-        <Text variant="s1">{twemojify(spaceName) || tabName}</Text>
+        <Text variant="s1" weight="medium" primary>{twemojify(spaceName) || tabName}</Text>
       </TitleWrapper>
       {spaceName && (
         <IconButton

src/app/organisms/navigation/Home.jsx

@@ -72,7 +72,7 @@ function Home({ spaceId }) {
 
   return (
     <>
-      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
+      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">Spaces</Text> }
       { spaceIds.map((id) => (
         <Selector
           key={id}
@@ -83,7 +83,7 @@ function Home({ spaceId }) {
         />
       ))}
 
-      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Rooms</Text> }
+      { roomIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">Rooms</Text> }
       { roomIds.map((id) => (
         <Selector
           key={id}
@@ -94,7 +94,7 @@ function Home({ spaceId }) {
         />
       )) }
 
-      { directIds.length !== 0 && <Text className="cat-header" variant="b3">People</Text> }
+      { directIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">People</Text> }
       { directIds.map((id) => (
         <Selector
           key={id}

src/app/organisms/profile-viewer/ProfileViewer.jsx

@@ -272,7 +272,7 @@ function ProfileViewer() {
             size="large"
           />
           <div className="profile-viewer__user__info">
-            <Text variant="s1">{twemojify(username)}</Text>
+            <Text variant="s1" weight="medium">{twemojify(username)}</Text>
             <Text variant="b2">{twemojify(userId)}</Text>
           </div>
           <div className="profile-viewer__user__role">

src/app/organisms/profile-viewer/ProfileViewer.scss

@@ -26,9 +26,6 @@
 
       margin: 0 var(--sp-normal);
 
-      & .text-s1 {
-        font-weight: 500;
-      }
       & .text {
         white-space: pre-wrap;
         word-break: break-word;

src/app/organisms/room/PeopleDrawer.jsx

@@ -143,7 +143,7 @@ function PeopleDrawer({ roomId }) {
     <div className="people-drawer">
       <Header>
         <TitleWrapper>
-          <Text variant="s1">
+          <Text variant="s1" primary>
             People
             <Text className="people-drawer__member-count" variant="b3">{`${room.getJoinedMemberCount()} members`}</Text>
           </Text>

src/app/organisms/room/RoomViewHeader.jsx

@@ -29,7 +29,7 @@ function RoomViewHeader({ roomId }) {
     <Header>
       <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
       <TitleWrapper>
-        <Text variant="h2">{twemojify(roomName)}</Text>
+        <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
         { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{twemojify(roomTopic)}</p>}
       </TitleWrapper>
       <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />

src/app/organisms/welcome/Welcome.jsx

@@ -10,7 +10,7 @@ function Welcome() {
     <div className="app-welcome flex--center">
       <div className="flex-v--center">
         <img className="app-welcome__logo noselect" src={CinnySvg} alt="Cinny logo" />
-        <Text className="app-welcome__heading" variant="h1">Welcome to Cinny</Text>
+        <Text className="app-welcome__heading" variant="h1" weight="medium">Welcome to Cinny</Text>
         <Text className="app-welcome__subheading" variant="s1">Yet another matrix client</Text>
       </div>
     </div>

src/app/templates/client/Client.jsx

@@ -49,7 +49,7 @@ function Client() {
         <Text className="loading__message" variant="b2">{loadingMsg}</Text>
 
         <div className="loading__appname">
-          <Text variant="h2">Cinny</Text>
+          <Text variant="h2" weight="bold">Cinny</Text>
         </div>
       </div>
     );

src/font-face.css

@@ -0,0 +1,59 @@
+/* ---- ROBOTO ---- */
+
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Light.ttf);
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Regular.ttf);
+  font-weight: 400;
+  font-display: swap;  
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Medium.ttf);
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Bold.ttf);
+  font-weight: 600;
+  font-display: swap;
+}
+
+/* ---- Inter ---- */
+
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 380;
+  font-display: swap;  
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 400;
+  font-display: swap;  
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 600;
+  font-display: swap;
+}

src/index.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+@import url(./font-face.css);
 
 :root {
 
@@ -43,7 +43,7 @@
   --tc-surface-high: #000000;
   --tc-surface-normal: rgba(0, 0, 0, 78%);
   --tc-surface-normal-low: rgba(0, 0, 0, 60%);
-  --tc-surface-low: rgba(0, 0, 0, 38%);
+  --tc-surface-low: rgba(0, 0, 0, 48%);
   
   --tc-primary-high: #ffffff;
   --tc-primary-normal: rgba(255, 255, 255, 68%);
@@ -113,7 +113,7 @@
   --bo-radius: 8px;
 
 
-  /* font syles */
+  /* font styles: font-size, letter-spacing, line-hight */
   --fs-h1: 36px;
   --ls-h1: -1.5px;
   --lh-h1: 38px;
@@ -138,6 +138,17 @@
   --ls-b3: 0px;
   --lh-b3: 16px;
 
+  /* font-weight */
+  --p-fw-light: 300;
+  --p-fw-normal: 400;
+  --p-fw-medium: 500;
+  --p-fw-bold: 600;
+
+  --fw-light: 300;
+  --fw-normal: 400;
+  --fw-medium: 500;
+  --fw-bold: 600;
+
 
   /* spacing | --sp-[space]: value */
   --sp-none: 0px;
@@ -162,7 +173,8 @@
   /* transition curves */
   --fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
   
-  --font-family: 'Roboto', 'Supreme', sans-serif;
+  --font-primary: 'Roboto', sans-serif;
+  --font-secondary: 'Roboto', sans-serif;
 }
 
 .silver-theme {
@@ -228,8 +240,25 @@
 
   --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
   --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
+  
+  /* font styles: font-size, letter-spacing, line-hight */
+  --fs-h1: 35.6px;
 
-  --font-family: 'Supreme', 'Roboto', sans-serif;
+  --fs-h2: 23.6px;
+
+  --fs-s1: 17.6px;
+
+  --fs-b1: 14.6px;
+  --ls-b1: 0.14px;
+
+  --fs-b2: 13.6px;
+
+  --fs-b3: 11.6px;
+
+  /* override normal font weight for dark mode */
+  --fw-normal: 380;
+
+  --font-secondary: 'Inter', 'Roboto', sans-serif;
 }
 
 .butter-theme {
@@ -264,8 +293,9 @@ body {
   margin: 0;
   padding: 0;
   height: 100%;
-  font-family: var(--font-family);
+  font-family: var(--font-secondary);
   font-size: 16px;
+  font-weight: var(--fw-normal);
   background-color: var(--bg-surface-low);
 }
 #root {
@@ -283,7 +313,7 @@ a {
   text-decoration: none;
 }
 b {
-  font-weight: 500;
+  font-weight: var(--fw-medium);
 }
 label {
   margin: 0;