Merge pull request #7 from coderdojo-japan/add-font

[DCJ2025-144] Rounded mplus p2フォントを使えるようにする

Author: kp54

_includes/top/sections/contact.html

@@ -1,8 +1,8 @@
 <section id="contact">
   <div class="d-flex flex-column align-items-center text-center">
-    <h2 class="header-letter-spacing">お問い合わせ</h2>
-    <p class="fs-4 fw-bold lh-base mb-4">CONTACT</p>
-    <p class="fs-6 fw-semibold letter-spacing lh-lg mb-5">DojoCon Japan {{ site.year }} についてのお問い合わせは<br>以下のリンク先（Googleフォーム）よりお願いいたします。</p>
+    <h2 class="title">お問い合わせ</h2>
+    <p class="subtitle">CONTACT</p>
+    <p class="text">DojoCon Japan {{ site.year }}についてのお問い合わせは<br>以下のリンク先（Googleフォーム）よりお願いいたします。</p>
 
     <a href="{{ site.contact }}" class="btn-lg" target="_blank" rel="noopener">お問い合わせフォーム</a>
   </div>

_sass/global/base.scss

@@ -6,9 +6,24 @@ html {
   scroll-behavior: smooth;
 }
 
+@font-face {
+  font-family: 'rounded-l-mplus-2p';
+  src: url('/assets/fonts/rounded-l-mplus-2p-bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'rounded-l-mplus-2p';
+  src: url('/assets/fonts/rounded-l-mplus-2p-regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+
 //全体の設定。文字の設定が主である。
 body {
-  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
+  font-family: 'rounded-l-mplus-2p';
   margin: 0;
   color: $text-color;
 }
@@ -629,4 +644,4 @@ table thead th {
   &-gray200 {
     background-color: var(--bs-gray-200);
   }
-}
+}

_sass/pages/index.scss

@@ -1,18 +1,32 @@
 #contact {
-  .header-letter-spacing {
-    letter-spacing: 0.2em;
+  .title {
+    font-size: 36px;
+    letter-spacing: 0.125rem;
+    margin-bottom: 4px;
   }
-  .letter-spacing {
-    letter-spacing: 0.17em;
+  .subtitle {
+    font-size: 24px;
+    letter-spacing: 0.065rem;
+    margin-bottom: 18px;
+    font-weight: bold;
+  }
+
+  .text {
+    font-size: 18px;
+    letter-spacing: 0.0625rem;
+    font-weight: bold;
+    line-height: 2rem;
   }
 
   .btn-lg {
+    margin: 20px 0;
     display: block;
     box-sizing: border-box;
-    width: 50%;
+    width: 70%;
     min-width: fit-content;
-    padding: 0.8rem 1.5rem;
-    font-size: 1.5rem;
+    padding: 16px 0;
+    font-size: 24px;
+    letter-spacing: 0.0625rem;
     font-weight: bold;
     color: #0e0e0e;
     background-color: #efefef;