update to use font from fontsource

Weaverse · Jan 14, 2024 · 014610b · 014610b
1 parent 72a7454
commit 014610b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/app/components/Link.tsx b/app/components/Link.tsx
@@ -31,7 +31,6 @@ export function Link(props: LinkProps) {
   const rootData = useRootLoaderData();
   let {enableViewTransition} = useThemeSettings();
   const selectedLocale = rootData?.selectedLocale;
-  console.log('enableViewTransition', enableViewTransition);
   let toWithLocale = to;
 
   if (typeof to === 'string') {

diff --git a/app/root.tsx b/app/root.tsx
@@ -30,6 +30,9 @@ import styles from './styles/app.css';
 import {DEFAULT_LOCALE, parseMenu} from './lib/utils';
 import {useAnalytics} from './hooks/useAnalytics';
 import {GlobalStyle} from './weaverse/style';
+import roboto400 from '@fontsource/roboto/400.css';
+import roboto500 from '@fontsource/roboto/500.css';
+import roboto700 from '@fontsource/roboto/700.css';
 
 // This is important to avoid re-fetching root queries on sub-navigations
 export const shouldRevalidate: ShouldRevalidateFunction = ({
@@ -52,29 +55,28 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
 
 export const links: LinksFunction = () => {
   return [
-    {rel: 'stylesheet', href: styles},
     {
-      rel: 'preconnect',
-      href: 'https://cdn.shopify.com',
+      rel: 'stylesheet',
+      href: roboto400,
     },
     {
-      rel: 'preconnect',
-      href: 'https://shop.app',
+      rel: 'stylesheet',
+      href: roboto500,
     },
-    {rel: 'icon', type: 'image/svg+xml', href: favicon},
     {
-      rel: 'preconnect',
-      href: 'https://fonts.googleapis.com',
+      rel: 'stylesheet',
+      href: roboto700,
     },
+    {rel: 'stylesheet', href: styles},
     {
-      href: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap',
-      rel: 'preload',
-      as: 'style',
+      rel: 'preconnect',
+      href: 'https://cdn.shopify.com',
     },
     {
-      href: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap',
-      rel: 'stylesheet',
+      rel: 'preconnect',
+      href: 'https://shop.app',
     },
+    {rel: 'icon', type: 'image/svg+xml', href: favicon},
   ];
 };
 

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
   ],
   "prettier": "@shopify/prettier-config",
   "dependencies": {
+    "@fontsource/roboto": "^5.0.8",
     "@headlessui/react": "1.7.18",
     "@remix-run/react": "2.4.1",
     "@remix-run/server-runtime": "2.4.1",