added inter from google fonts

stored locally since load times were really high when using <link>

README.txt

@@ -0,0 +1,72 @@
+Inter Variable Font
+===================
+
+This download contains Inter as both a variable font and static fonts.
+
+Inter is a variable font with these axes:
+  slnt
+  wght
+
+This means all the styles are contained in a single file:
+  Inter-VariableFont_slnt,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Inter:
+  static/Inter-Thin.ttf
+  static/Inter-ExtraLight.ttf
+  static/Inter-Light.ttf
+  static/Inter-Regular.ttf
+  static/Inter-Medium.ttf
+  static/Inter-SemiBold.ttf
+  static/Inter-Bold.ttf
+  static/Inter-ExtraBold.ttf
+  static/Inter-Black.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

public/index.html

@@ -15,6 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -1,3 +1,6 @@
 body{
     overflow:hidden;
 }
+.font-face-inter {
+    font-family: "Inter";
+   }

src/App.js

@@ -97,7 +97,7 @@ function App() {
                 style={{ position: "absolute", fontWeight: "bold" }}
                 bottom={10}
               >
-                <p style={{ fontSize: "15pt", fontFamily: "Inter" }}>
+                <p style={{ fontSize: "15pt"}} className="font-face-inter">
                   Hello {user.attributes.name.split(" ")[0]}!
                 </p>
               </Box>
@@ -108,18 +108,19 @@ function App() {
         )}
 
         <Center
-          style={{ fontSize: "30px", fontWeight: "bold", fontFamily: "Inter" }}
+          style={{ fontSize: "30px", fontWeight: "bold" }} className="font-face-inter"
         >
           <DateTime type="date" />
         </Center>
         <Center
-          style={{ fontFamily: "Inter", fontSize: "50px", marginTop: "13%" }}
+          style={{  fontSize: "50px", marginTop: "13%" }}
+          className="font-face-inter"
         >
           <DateTime type="time" />
         </Center>
         {data && (
           <Center >
-            <Blockquote style={{fontFamily: "Inter"}} cite={"-" + data.author}>{data.quote}</Blockquote>{" "}
+            <Blockquote className="font-face-inter" cite={"-" + data.author}>{data.quote}</Blockquote>{" "}
           </Center> //TODO: calls twice for some reason
         )}
 

src/components/toDoListAuth.js

@@ -53,7 +53,7 @@ function ToDoListAuth(props) {
         bottom: 0,
       }}
     >
-      <Center><p style={{fontSize:"16px", fontFamily:"Inter"}}>To Do List</p></Center>
+      <Center><p className="font-link" style={{fontSize:"16px"}}>To Do List</p></Center>
       <Flex direction="row" justify="flex-end" gap={10} align="flex-start">
         <TextInput
           icon={<IconListDetails />}

src/components/toDoListLocal.js

@@ -53,7 +53,7 @@ function ToDoListLocal(props) {
         bottom: 0,
       }}
     >
-      <Center>To Do List</Center>
+      <Center><p className="font-face-inter">To Do List </p></Center>
       <Flex direction="row" justify="flex-end" gap={10} align="flex-start">
         <TextInput
           icon={<IconListDetails />}

src/index.css

@@ -0,0 +1,5 @@
+@font-face {
+    font-family: "Inter";
+    src: local("Inter"),
+     url("./fonts/Inter-Regular.ttf") format("truetype");
+    }

src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { Authenticator } from '@aws-amplify/ui-react';
+import './fonts/Inter-Regular.ttf';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(