playing around with fonts

src/app.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Protest+Riot&family=Tilt+Warp&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <main class="container px-8 sm:mx-auto">
-  <h1 class="mt-40 text-4xl sm:mt-60 sm:text-6xl md:text-8xl">Raymond Wang</h1>
-  <h2 class="mt-4 text-2xl">
+  <p class="mt-40 sm:mt-60">hey, I'm</p>
+  <h1 class="font-display text-4xl sm:text-6xl md:text-8xl">Raymond</h1>
+  <h2 class="mt-8 text-2xl">
     Software Engineer at
     <a
       class="hover:underline hover:underline-offset-4"

tailwind.config.ts

@@ -0,0 +1,19 @@
+import { Config } from 'tailwindcss';
+import defaultTheme from 'tailwindcss/defaultTheme';
+
+const config: Config = {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  plugins: [],
+  theme: {
+    fontFamily: {
+      sans: ['"Tilt Warp"', ...defaultTheme.fontFamily.sans],
+    },
+    extend: {
+      fontFamily: {
+        display: ['"Protest Riot"', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+};
+
+export default config;