perf(#194): updated default font to open sans to keep the file small

Author: sametcodes

lib/@dsvgui/components/article/index.tsx

@@ -76,20 +76,13 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
                 <g transform={`translate(${xOffset} 24)`}>
                   <text
                     xmlSpace="preserve"
-                    fontFamily="Manrope"
                     fontWeight="700"
                     fill="#0c0c0c"
                     fontSize="16"
                   >
                     {title}
                   </text>
-                  <text
-                    fill="#999999"
-                    xmlSpace="preserve"
-                    fontSize={12}
-                    fontFamily="Manrope"
-                    y={5 + title.length * 15}
-                  >
+                  <text fill="#999999" fontSize={12} y={5 + title.length * 15}>
                     {wrapText(
                       article.meta.description.replace(/\n/gm, " "),
                       {

lib/@dsvgui/components/barstats/index.tsx

@@ -33,28 +33,14 @@ export const BarStats: React.FC<IBarStats> = ({
         <g id="content">
           <g id="Frame 134">
             <g id="title">
-              <text
-                id="Most used languages"
-                className="title"
-                xmlSpace="preserve"
-                fontFamily="Manrope"
-                fontWeight="600"
-                letterSpacing="0px"
-              >
+              <text className="title" fontWeight="700">
                 <tspan x="0" y="21.511">
                   {title}
                 </tspan>
               </text>
             </g>
             <g id="subtitle">
-              <text
-                id="in the last 7 days"
-                className="subtitle"
-                xmlSpace="preserve"
-                fontFamily="Manrope"
-                fontWeight="600"
-                letterSpacing="0px"
-              >
+              <text className="subtitle">
                 <tspan x="0" y="40">
                   {subtitle}
                 </tspan>

lib/@dsvgui/components/calendar/index.tsx

@@ -163,7 +163,7 @@ export const Calendar: React.FC<ICalendar> = ({
         {(title || subtitle || showStreak) && (
           <g id="Title">
             {title && (
-              <text xmlSpace="preserve" className="title">
+              <text xmlSpace="preserve" className="title" fontWeight="700">
                 <tspan x="0" y="18">
                   {title}
                 </tspan>

lib/@dsvgui/components/fallback/index.tsx

@@ -34,7 +34,6 @@ export const Fallback: React.FC<IFallback> = ({ title, message }) => {
       <text
         fill="#3e3e3e"
         xmlSpace="preserve"
-        fontFamily="Manrope"
         fontSize="22"
         fontWeight="bold"
         letterSpacing="0.1px"
@@ -43,13 +42,7 @@ export const Fallback: React.FC<IFallback> = ({ title, message }) => {
           {title}
         </tspan>
       </text>
-      <text
-        fill="#6e6e6e"
-        xmlSpace="preserve"
-        fontFamily="Manrope"
-        fontSize="14"
-        fontWeight="400"
-      >
+      <text fill="#6e6e6e" xmlSpace="preserve" fontSize="14" fontWeight="400">
         {subtitle}
       </text>
     </Document>

lib/@dsvgui/components/flock/index.tsx

@@ -62,8 +62,7 @@ export const Flock: React.FC<IFlock> = ({
         <text
           xmlns="http://www.w3.org/2000/svg"
           className="title"
-          fontFamily="Manrope"
-          fontWeight="500"
+          fontWeight="700"
         >
           <tspan x={headStart.x} y={headStart.y}>
             {title.trim()}
@@ -74,7 +73,6 @@ export const Flock: React.FC<IFlock> = ({
         <text
           xmlns="http://www.w3.org/2000/svg"
           className="subtitle"
-          fontFamily="Manrope"
           fontWeight="400"
         >
           <tspan x={headStart.x} y={headStart.y + titleFontSize}>

lib/@dsvgui/components/line/index.tsx

@@ -41,21 +41,25 @@ export const Line: React.FC<ILine> = ({ items }) => {
     let x = -xGap;
     let path =
       "M " +
-      (x + xGap) +
+      (x + xGap).toFixed(3) +
       " " +
-      (lineHeight -
+      (
+        lineHeight -
         (item.period ? 7 : -5) -
-        (item.points[0] / maxValue) * lineHeight * ratio);
+        (item.points[0] / maxValue) * lineHeight * ratio
+      ).toFixed(3);
 
     for (const point of item.points) {
       x += xGap;
       path +=
         " L " +
         x +
         " " +
-        (lineHeight -
+        (
+          lineHeight -
           (item.period ? 7 : -5) -
-          (point / maxValue) * lineHeight * ratio);
+          (point / maxValue) * lineHeight * ratio
+        ).toFixed(3);
     }
 
     return path;
@@ -221,42 +225,42 @@ export const Line: React.FC<ILine> = ({ items }) => {
           >
             <stop offset="0" stopColor="#ffffff" />
             <stop
-              offset="0.141455"
+              offset="0.15"
               stopColor={`rgba(${hexToRgb(
                 item.lineColor || "#000000",
                 0.7
               ).join(", ")})`}
             />
             <stop
-              offset="0.201455"
+              offset="0.20"
               stopColor={`rgba(${hexToRgb(
                 item.lineColor || "#000000",
                 0.3
               ).join(", ")})`}
             />
             <stop
-              offset="0.363128"
+              offset="0.4"
               stopColor={`rgba(${hexToRgb(
                 item.lineColor || "#000000",
                 0.5
               ).join(", ")})`}
             />
             <stop
-              offset="0.581288"
+              offset="0.6"
               stopColor={`rgba(${hexToRgb(
                 item.lineColor || "#000000",
                 0.7
               ).join(", ")})`}
             />
             <stop
-              offset="0.729526"
+              offset="0.8"
               stopColor={`rgba(${hexToRgb(
                 item.lineColor || "#000000",
                 0.8
               ).join(", ")})`}
             />
             <stop
-              offset="0.923128"
+              offset="0.9"
               stopColor={`rgba(${hexToRgb(
                 item.lineColor || "#000000",
                 0.7

lib/@dsvgui/components/metrics/index.tsx

@@ -39,20 +39,14 @@ export const Metrics: React.FC<IMetrics> = ({ data, icon: Icon }) => {
 
           return (
             <Fragment key={index}>
-              <text
-                fill="#878787"
-                xmlSpace="preserve"
-                fontFamily="Manrope"
-                className="subtitle"
-              >
+              <text fill="#878787" xmlSpace="preserve" className="subtitle">
                 <tspan x={xText} y={10}>
                   {item.title}
                 </tspan>
               </text>
               <text
                 fill="black"
                 xmlSpace="preserve"
-                fontFamily="Manrope"
                 className="title"
                 fontWeight="600"
               >

lib/@dsvgui/components/progress/index.tsx

@@ -18,7 +18,7 @@ export const Progress: React.FC<IProgress> = ({ title, percent, metrics }) => {
 
   return (
     <Document w={462} h={height}>
-      <text fill="#5E5E5E" className="title">
+      <text fill="#5E5E5E" className="title" fontWeight="700">
         <tspan x="0" y="20.7539">
           {title}
         </tspan>

lib/@dsvgui/document/branding.tsx

@@ -9,7 +9,6 @@ export const Branding: React.FC<IBranding> = ({ x, y }) => {
       id="dsvguibranding"
       xmlSpace="preserve"
       fontSize={8}
-      fontFamily="Manrope"
       fill="#cccccc"
       x={x}
       y={y}

lib/@dsvgui/document/style.tsx

@@ -1,24 +1,8 @@
-import * as Manrope from "./fonts/manrope";
-
-const buildFontFace = (font: string, weight: number, value: string) => {
-  return `@font-face {
-    font-family: '${font}';
-    font-style: normal;
-    font-weight: ${weight};
-    font-display: swap;
-    src: url('data:application/font-woff;base64,${value}') format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }`;
-};
-
 export const Style: React.FC = () => {
   return (
     <defs>
       <style>{`
-            ${buildFontFace("Manrope", 300, Manrope.W300)} 
-            ${buildFontFace("Manrope", 500, Manrope.W500)} 
-            ${buildFontFace("Manrope", 700, Manrope.W700)} 
-            text{ font-family: 'Manrope', 'Open Sans', 'Segoe UI', Ubuntu, 'Helvetica Neue', Sans-Serif; }
+            text{ font-family: 'Open Sans', 'Segoe UI', Ubuntu, 'Helvetica Neue', Sans-Serif; }
             text.title{ fill: #32373e; font-size: 22px; }
             text.subtitle{ fill: #9c9c9c; font-size: 16px; }
             .dsvgui-container{ fill: #fbfbfb; }

lib/@dsvgui/utils/fonts.ts

@@ -31,3 +31,14 @@ export const loadFontBuffer = (
   fonts[fontFamily][weight] = fontBuffer;
   return fontBuffer;
 };
+
+export const buildFontFace = (font: string, weight: number, value: string) => {
+  return `@font-face {
+    font-family: '${font}';
+    font-style: normal;
+    font-weight: ${weight};
+    font-display: swap;
+    src: url('data:application/font-woff;base64,${value}') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }`;
+};

lib/@dsvgui/utils/index.ts

@@ -12,7 +12,7 @@ type IGetTextWidth = (
 ) => number;
 
 export const getTextWidth: IGetTextWidth = (inputText, options) => {
-  const { fontSize, fontWeight = 500, fontFamily = "Manrope" } = options;
+  const { fontSize, fontWeight = 500, fontFamily = "Open Sans" } = options;
 
   let text = inputText ?? "";
   text = text.toString();