feat: フォントファミリーを設定

Author: 3w36zj6

website/src/components/templates/BaseTemplate.tsx

@@ -73,21 +73,29 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
           rel="preload"
           href="/assets/fonts/HKGrotesk-Regular.woff2"
           as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
         />
         <link
           rel="preload"
           href="/assets/fonts/HKGrotesk-Bold.woff2"
           as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
         />
         <link
           rel="preload"
           href="/assets/fonts/HKGrotesk-SemiBold.woff2"
           as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
         />
         <link
           rel="preload"
           href="/assets/fonts/CascadiaMono-Regular-Sub.woff2"
           as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
         />
         <link href="/src/styles.css" rel="stylesheet"></link>
         <script

website/src/styles.css

@@ -1,2 +1,48 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
+
+@font-face {
+  font-family: "HK Grotesk";
+  src: url("/assets/fonts/HKGrotesk-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "HK Grotesk";
+  src: url("/assets/fonts/HKGrotesk-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "HK Grotesk";
+  src: url("/assets/fonts/HKGrotesk-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Cascadia Mono";
+  src: url("/assets/fonts/CascadiaMono-Regular-Sub.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+body {
+  font-family: "HK Grotesk", Inter, "BIZ UDGothic", "BIZ UDPGothic", system-ui,
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-family: "Cascadia Mono", SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+}