[PM-16057] use Roboto as primary font (#14553)

* swap to using roboto variable font
2025-12-06 00:13:28 +00:00 · 2025-05-12 09:00:01 -04:00
parent fcaf5e63c5
commit 4d15f2d43c
18 changed files with 20 additions and 20 deletions
--- a/apps/browser/src/autofill/content/components/constants/styles.ts
+++ b/apps/browser/src/autofill/content/components/constants/styles.ts
@@ -144,17 +144,17 @@ export const border = {
 export const typography = {
  body1: `
    line-height: 24px;
-    font-family: "DM Sans", sans-serif;
+    font-family: Roboto, sans-serif;
    font-size: 16px;
  `,
  body2: `
    line-height: 20px;
-    font-family: "DM Sans", sans-serif;
+    font-family: Roboto, sans-serif;
    font-size: 14px;
  `,
  helperMedium: `
    line-height: 16px;
-    font-family: "DM Sans", sans-serif;
+    font-family: Roboto, sans-serif;
    font-size: 12px;
  `,
 };
--- a/apps/browser/src/autofill/content/components/notification/confirmation/message.ts
+++ b/apps/browser/src/autofill/content/components/notification/confirmation/message.ts
@@ -72,7 +72,7 @@ const baseTextStyles = css`
  text-align: left;
  text-overflow: ellipsis;
  line-height: 24px;
-  font-family: "DM Sans", sans-serif;
+  font-family: Roboto, sans-serif;
  font-size: 16px;
 `;

--- a/apps/browser/src/autofill/content/components/notification/header-message.ts
+++ b/apps/browser/src/autofill/content/components/notification/header-message.ts
@@ -19,7 +19,7 @@ const notificationHeaderMessageStyles = (theme: Theme) => css`
  line-height: 28px;
  white-space: nowrap;
  color: ${themes[theme].text.main};
-  font-family: "DM Sans", sans-serif;
+  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 600;
 `;
--- a/apps/browser/src/autofill/shared/styles/variables.scss
+++ b/apps/browser/src/autofill/shared/styles/variables.scss
@@ -1,6 +1,6 @@
 $dark-icon-themes: "theme_dark";

-$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-source-code-pro: "Source Code Pro", monospace;
 $font-size-base: 14px;

--- a/apps/browser/src/popup/images/loading.svg
+++ b/apps/browser/src/popup/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text>
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -1,6 +1,6 @@
 $dark-icon-themes: "theme_dark";

-$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 $font-size-base: 16px;
 $font-size-large: 18px;
--- a/apps/desktop/src/app/components/avatar.component.ts
+++ b/apps/desktop/src/app/components/avatar.component.ts
@@ -113,7 +113,7 @@ export class AvatarComponent implements OnChanges, OnInit {
    textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
    textTag.setAttribute(
      "font-family",
-      '"DM Sans","Helvetica Neue",Helvetica,Arial,' +
+      'Roboto,"Helvetica Neue",Helvetica,Arial,' +
        'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
    );
    textTag.textContent = character;
--- a/apps/desktop/src/images/loading.svg
+++ b/apps/desktop/src/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text>
--- a/apps/desktop/src/scss/variables.scss
+++ b/apps/desktop/src/scss/variables.scss
@@ -1,6 +1,6 @@
 $dark-icon-themes: "theme_dark";

-$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 $font-size-base: 14px;
 $font-size-large: 18px;
--- a/apps/web/src/app/billing/services/stripe.service.ts
+++ b/apps/web/src/app/billing/services/stripe.service.ts
@@ -148,7 +148,7 @@ export class StripeService {
        base: {
          color: null,
          fontFamily:
-            '"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
+            'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
            '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
          fontSize: "16px",
          fontSmoothing: "antialiased",
--- a/apps/web/src/images/loading-white.svg
+++ b/apps/web/src/images/loading-white.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23FBFBFB" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23FBFBFB" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text> 
--- a/apps/web/src/images/loading.svg
+++ b/apps/web/src/images/loading.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
-  <text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
+  <text fill="%23333333" x="50%" y="50%" font-family="\'Roboto\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
        font-size="18" text-anchor="middle">
    Loading...
  </text>
--- a/apps/web/src/scss/variables.scss
+++ b/apps/web/src/scss/variables.scss
@@ -21,7 +21,7 @@ $body-bg: $white;
 $body-color: #333333;

 $font-family-sans-serif:
-  "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  "Segoe UI Symbol";

 $h1-font-size: 1.7rem;
--- a/libs/angular/src/scss/webfonts.css
+++ b/libs/angular/src/scss/webfonts.css
@@ -1,8 +1,8 @@
@font-face {
-  font-family: "DM Sans";
+  font-family: Roboto;
  src:
-    url("webfonts/dm-sans.woff2") format("woff2 supports variations"),
-    url("webfonts/dm-sans.woff2") format("woff2-variations");
+    url("webfonts/roboto.woff2") format("woff2 supports variations"),
+    url("webfonts/roboto.woff2") format("woff2-variations");
  font-display: swap;
  font-weight: 100 900;
 }
--- a/libs/angular/src/scss/webfonts/dm-sans.woff2
+++ b/libs/angular/src/scss/webfonts/dm-sans.woff2
--- a/libs/angular/src/scss/webfonts/roboto.woff2
+++ b/libs/angular/src/scss/webfonts/roboto.woff2
--- a/libs/components/src/avatar/avatar.component.ts
+++ b/libs/components/src/avatar/avatar.component.ts
@@ -123,7 +123,7 @@ export class AvatarComponent implements OnChanges {
    textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
    textTag.setAttribute(
      "font-family",
-      '"DM Sans","Helvetica Neue",Helvetica,Arial,' +
+      'Roboto,"Helvetica Neue",Helvetica,Arial,' +
        'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
    );
    // Warning do not use innerHTML here, characters are user provided
--- a/libs/components/src/variables.scss
+++ b/libs/components/src/variables.scss
@@ -21,7 +21,7 @@ $body-bg: $white;
 $body-color: #333333;

 $font-family-sans-serif:
-  "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  "Segoe UI Symbol";

 $h1-font-size: 1.7rem;