body font updates and fixed title font in app

Author: bflatastic

frontend/apps/artcraft-website/index.html

@@ -34,7 +34,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
       rel="stylesheet"
     />
   </head>

frontend/apps/artcraft-website/src/styles.css

@@ -13,6 +13,7 @@
   }
   body {
     font-family:
+      "Source Sans 3",
       system-ui,
       -apple-system,
       BlinkMacSystemFont,

frontend/apps/artcraft/app/index.html

@@ -31,7 +31,7 @@
   <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
     rel="stylesheet" />
   <!-- <link rel="stylesheet" href="/src/styles.css" /> -->
 </head>

frontend/apps/artcraft/app/src/pages/PageImage/TextToImage.tsx

@@ -139,9 +139,9 @@ const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
                 imageRowVisible && "mb-80",
               )}
             >
-              <span className="text-7xl font-bold text-base-fg">
+              <h1 className="text-7xl font-bold text-base-fg">
                 Generate Image
-              </span>
+              </h1>
               <span className="pt-2 text-xl text-base-fg opacity-80">
                 Add a prompt, then generate
               </span>

frontend/apps/artcraft/app/src/pages/PageVideo/ImageToVideo.tsx

@@ -125,9 +125,7 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
               imageRowVisible && "mb-80",
             )}
           >
-            <span className="text-7xl font-bold text-base-fg">
-              Generate Video
-            </span>
+            <h1 className="text-7xl font-bold text-base-fg">Generate Video</h1>
             <span className="pt-2 text-xl text-base-fg opacity-80">
               Choose an image, add a prompt, then generate
             </span>

frontend/apps/artcraft/app/src/root.tsx

@@ -46,7 +46,7 @@ export const links: LinksFunction = () => [
   },
   {
     rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap",
+    href: "https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap",
   },
 ];
 

frontend/apps/artcraft/app/src/styles/base.css

@@ -42,7 +42,7 @@ h6 {
 }
 
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   color: var(--st-fg);
   background-color: var(--st-bg);
   color-scheme: var(--st-color-scheme, dark);