Change font and remove text from brandpill

index.html

@@ -132,7 +132,10 @@
     media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
     href="/splash_screens/8.3__iPad_Mini_portrait.png">
 
-  <link href="//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack.css" rel="stylesheet" />
+  <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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+
 
   <script src="/config.js"></script>
 

src/assets/css/index.css

@@ -4,12 +4,10 @@
 
 html,
 body {
-  @apply bg-background-main font-hack text-type-text;
+  @apply bg-background-main font-main text-type-text;
   min-height: 100vh;
   min-height: 100dvh;
-  font-size: 0.97em;
-  letter-spacing: 0.01em;
-  word-spacing: -0.12em;
+  font-size: 1.0235em; 
 }
 
 html[data-full],

src/components/layout/BrandPill.tsx

@@ -5,7 +5,7 @@ import { Icon, Icons } from "@/components/Icon";
 
 export function BrandPill(props: {
   clickable?: boolean;
-  hideTextOnMobile?: boolean;
+  // hideTextOnMobile?: boolean;
   backgroundClass?: string;
 }) {
   const { t } = useTranslation();
@@ -20,15 +20,7 @@ export function BrandPill(props: {
           : "",
       )}
     >
-      <Icon className="text-xl" icon={Icons.MOVIE_WEB} />
-      <span
-        className={[
-          "font-semibold text-white",
-          props.hideTextOnMobile ? "hidden sm:block" : "",
-        ].join(" ")}
-      >
-        {t("global.name")}
-      </span>
+      <Icon className="text-2xl" icon={Icons.MOVIE_WEB} />
     </div>
   );
 }

src/components/player/atoms/NextEpisodeButton.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Icon, Icons } from "@/components/Icon";

tailwind.config.ts

@@ -16,7 +16,7 @@ const config: Config = {
 
       /* fonts */
       fontFamily: {
-        "hack": "'Hack'",
+        "main": "'DM Sans'",
       },
 
       /* animations */