update font-family + update font-weight for poweredBy (#2482)

* update font-family + update font-weight for poweredBy

* adding system-ui, -apple-system, Segoe UI to font-family + update CLASS.TAGLINE font-weight to 400

* update font-family for page.js

* update font-family for template.jsx

Author: hnguyen510

Diff for: src/marks/template.jsx

@@ -78,7 +78,7 @@ export function MarksElement({
       <style>
         {`
                     .${CLASS.TEXT} {
-                        font-family: PayPalOpen-Regular, Helvetica, Arial, "Liberation Sans", sans-serif;
+                        font-family: PayPalPlain-Regular, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
                         font-size: 12px;
                         vertical-align: middle;
                     }

Diff for: src/ui/buttons/poweredBy.jsx

@@ -15,9 +15,9 @@ const POWERED_BY_PAYPAL_STYLE = `
         text-align: center;
         margin: 10px auto;
         height: 14px;
-        font-family: PayPalOpen-Regular, Helvetica, Arial, "Liberation Sans", sans-serif;
+        font-family: PayPalPlain-Regular, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
         font-size: 11px;
-        font-weight: normal;
+        font-weight: 400;
         font-style: italic;
         font-stretch: normal;
         color: #7b8388;

Diff for: src/ui/buttons/styles/button.js

@@ -15,7 +15,7 @@ export const buttonStyle = `
         margin: 0;
         background: 0;
         border: 0;
-        font-family: PayPalOpen-Regular, Helvetica, Arial, "Liberation Sans", sans-serif;
+        font-family: PayPalPlain-Regular, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
         text-transform: none;
         font-weight: 500;
         font-smoothing: antialiased;
@@ -80,7 +80,7 @@ export const buttonStyle = `
     .${CLASS.TAGLINE} {
         max-width: 100%;
         font-size: initial;
-        font-weight: normal;
+        font-weight: 400;
         display: block;
         text-align: center;
         width: auto;

Diff for: src/ui/buttons/styles/page.js

@@ -4,7 +4,7 @@ import { CLASS } from "../../../constants";
 
 export const pageStyle = `
     html, body {
-        font-family: PayPalOpen-Regular, Helvetica, Arial, "Liberation Sans", sans-serif;
+        font-family: PayPalPlain-Regular, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
         padding: 0;
         margin: 0;
         width: 100%;