feat: FOUTを防止

Author: SatooRu65536

Diff for: package.json

@@ -15,16 +15,17 @@
   "dependencies": {
     "@astrojs/mdx": "^4.0.8",
     "@astrojs/sitemap": "^3.2.1",
-    "@fontsource/zen-kaku-gothic-new": "^5.1.1",
     "astro": "^5.2.1",
     "astro-auto-import": "^0.4.4",
     "marked": "^15.0.6",
     "remeda": "^2.20.0",
     "sass": "^1.83.4",
     "sharp": "^0.33.5",
-    "swiper": "^11.2.2"
+    "swiper": "^11.2.2",
+    "webfontloader": "^1.6.28"
   },
   "devDependencies": {
+    "@types/webfontloader": "^1.6.38",
     "axios": "^1.7.9",
     "jiti": "^2.4.2",
     "prettier": "^3.4.2",

Diff for: pnpm-lock.yaml

@@ -2,11 +2,6 @@
 import { PRELOAD_IMAGE_MAP } from '@/utils/images';
 import Header from '@/components/Header/index.astro';
 import Footer from '@/components/Footer/index.astro';
-import '@/styles/globals.scss';
-import '@fontsource/zen-kaku-gothic-new';
-import '@fontsource/zen-kaku-gothic-new/300.css';
-import '@fontsource/zen-kaku-gothic-new/500.css';
-import '@fontsource/zen-kaku-gothic-new/900.css';
 import {
   CATEGORY,
   DESCRIPTION,
@@ -43,6 +38,9 @@ ogpImageUrl.searchParams.append('v', Date.now().toString());
     <meta name="generator" content={Astro.generator} />
     {Object.values(PRELOAD_IMAGE_MAP).map((value) => <link rel="preload" href={value} as="image" />)}
     <title>{title == undefined ? 'システム工学研究会' : `${title} | シス研`}</title>
+    <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=Zen+Kaku+Gothic+New&display=swap" rel="stylesheet" />
 
     <meta name="description" content={DESCRIPTION} />
     <meta name="application-name" content={SITE_NAME} />
@@ -77,3 +75,43 @@ ogpImageUrl.searchParams.append('v', Date.now().toString());
     <Footer />
   </body>
 </html>
+
+<style lang="scss" is:global>
+  html:not(.wf-active) {
+    visibility: hidden;
+  }
+
+  :root {
+    font-size: 16px;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    font-family: 'Zen Kaku Gothic New', sans-serif;
+    letter-spacing: 0.5px;
+  }
+
+  main {
+    padding-top: $header-height;
+    min-height: 100vh;
+  }
+</style>
+
+<script>
+  import * as WebFont from 'webfontloader';
+
+  WebFont.load({
+    google: {
+      families: ['Zen Kaku Gothic New'],
+    },
+  });
+</script>