Change Font

Author: blueberry1001

main/public/fonts/RethinkSans-VariableFont_wght.woff

@@ -1,7 +1,6 @@
 ---
-import { SITE_TITLE } from '../consts';
-import HeaderLink from './HeaderLink.astro';
 import '../styles/style_header.css';
+import HeaderLink from './HeaderLink.astro';
 ---
 
 <header>
@@ -13,7 +12,7 @@ import '../styles/style_header.css';
  		</a>
 		</h2>
 		<div class="internal-links">
-			<HeaderLink href="/">Home</HeaderLink>
+			<HeaderLink href="/">ホーム</HeaderLink>
 			<HeaderLink href="/works">作品展示</HeaderLink>
 			<HeaderLink href="/achievements">活動実績</HeaderLink>
 		</div>

main/src/components/Header.astro

@@ -2,4 +2,5 @@
 // You can import this data from anywhere in your site by using the `import` keyword.
 
 export const SITE_TITLE = "Toin Computer Association";
-export const SITE_DESCRIPTION = "TCA's Official Website";
+export const SITE_DESCRIPTION =
+  "筑波大学附属高校の部活、TCA（Toin Computer Association）の公式Webサイトです。過去の作品紹介や活動実績などを掲載しています。";

main/src/consts.ts

@@ -1,51 +1,58 @@
-@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
-.midashi{
-    color: white;
-    padding-bottom: 75px;
-    font-family: Rethink Sans;
-    font-size: 80px;
-}
-.small_midashi_1{border-left: solid 8px rgb(151,244,255);
-    padding-left: 13px;
-    font-weight: normal;
-    color:white;
-
+/* @import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"); */
+@font-face {
+  font-family: "Rethink Sans";
+  src: url("/fonts/RethinkSans-VariableFont_wght.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
 }
-.small_midashi_2{border-left: solid 8px rgb(151,244,255);
-    padding-left: 13px;
-    font-weight: normal;
-    color:white;
-
+.midashi {
+  color: white;
+  padding-bottom: 75px;
+  font-family: "Rethink Sans";
+  font-size: 80px;
 }
-.small_midashi_3{border-left: solid 8px rgb(151,244,255);
-    padding-left: 13px;
-    font-weight: normal;
-    color:white;
+.small_midashi_1 {
+  border-left: solid 8px rgb(151, 244, 255);
+  padding-left: 13px;
+  font-weight: normal;
+  color: white;
+}
+.small_midashi_2 {
+  border-left: solid 8px rgb(151, 244, 255);
+  padding-left: 13px;
+  font-weight: normal;
+  color: white;
+}
+.small_midashi_3 {
+  border-left: solid 8px rgb(151, 244, 255);
+  padding-left: 13px;
+  font-weight: normal;
+  color: white;
 }
 
-body{
-    background: black;
-
+body {
+  background: black;
 }
 
-.bun_1{
-    color: rgb(224, 224, 224);
-    padding-bottom: 80px;
+.bun_1 {
+  color: rgb(224, 224, 224);
+  padding-bottom: 80px;
 }
 
-.bun_2{
-    color: rgb(224, 224, 224);
-    padding-bottom: 80px;
+.bun_2 {
+  color: rgb(224, 224, 224);
+  padding-bottom: 80px;
 }
 
-.link_list{
-    padding-bottom: 60px;
-    color: rgb(224, 224, 224);
+.link_list {
+  padding-bottom: 60px;
+  color: rgb(224, 224, 224);
 }
 
-a{
-    color: rgb(179, 157, 219);
+a {
+  color: rgb(179, 157, 219);
+}
+a:hover {
+  color: rgb(232, 234, 246);
 }
-a:hover{
-    color: rgb(232, 234, 246);
-}