use astro font util

Atotti · Jan 12, 2025 · c27b11c · c27b11c
1 parent 16e1b34
commit c27b11c
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,10 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/react": "^4.1.2",
+    "@fontsource-variable/noto-sans-jp": "^5.1.1",
+    "@fontsource/hachi-maru-pop": "^5.1.1",
+    "@fontsource/varela-round": "^5.1.1",
+    "@fontsource/zen-kaku-gothic-new": "^5.1.1",
     "@fortawesome/fontawesome-free": "^6.7.1",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,5 +1,6 @@
 ---
 import { css } from '../../styled-system/css'
+import '@fontsource/hachi-maru-pop';
 ---
 
 <header class={css({

diff --git a/src/components/ProgressBar.astro b/src/components/ProgressBar.astro
@@ -25,7 +25,7 @@ const { percentage, color = "linear-gradient(to right, #0077cc, #00a0ff)" } = As
     font-size: 1rem;
     margin-bottom: 5px;
     color: #333;
-    font-family: "Noto Sans JP", sans-serif;
+    font-family: 'Noto Sans JP Variable', sans-serif;
 }
 
 .progress-bar {

diff --git a/src/components/SkillsSection.astro b/src/components/SkillsSection.astro
@@ -86,7 +86,7 @@ const skillCardTextStyle = css({
     "display": "flex",
     "color": "#666666",
     "justifyContent": "center",
-    "fontFamily": "Noto Sans JP, Varela Round, sans-serif",
+    "fontFamily": "'Noto Sans JP Variable', sans-serif",
 })
 ---
 

diff --git a/src/components/Sns/GitHubIcon.astro b/src/components/Sns/GitHubIcon.astro
@@ -1,8 +1,9 @@
 ---
+import { FaGithub } from "react-icons/fa";
 ---
 
 <a href="https://github.com/Atotti" target="_blank" class="sns-icon">
-    <i class="fa-brands fa-github"></i>
+    <FaGithub />
 </a>
 
 

diff --git a/src/components/Sns/PixivIcon.astro b/src/components/Sns/PixivIcon.astro
diff --git a/src/components/Sns/TwitterIcon.astro b/src/components/Sns/TwitterIcon.astro
@@ -1,8 +1,9 @@
 ---
+import { FaTwitter } from "react-icons/fa";
 ---
 
 <a href="https://x.com/aya172957" target="_blank" class="sns-icon">
-    <i class="fa-brands fa-twitter"></i>
+    <FaTwitter />
 </a>
 
 <style>

diff --git a/src/components/SnsIcons.astro b/src/components/SnsIcons.astro
@@ -1,13 +1,11 @@
 ---
 import TwitterIcon from './Sns/TwitterIcon.astro';
 import GitHubIcon from './Sns/GitHubIcon.astro';
-import PixivIcon from './Sns/PixivIcon.astro';
 ---
 
 <div>
     <TwitterIcon />
     <GitHubIcon />
-    <PixivIcon />
 </div>
 
 

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,8 +1,10 @@
 ---
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
+import '@fontsource-variable/noto-sans-jp';
+import '@fontsource/zen-kaku-gothic-new';
+import '@fontsource/varela-round';
 
-import { css, cx} from '../../styled-system/css'
 
 import '../styles/global.css';
 import '../index.css';
@@ -12,9 +14,6 @@ import '../index.css';
 <html lang="ja">
 	<head>
 		<meta charset="UTF-8" />
-    	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap" rel="stylesheet">
-    	<link href="https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=Rampart+One&family=Zen+Kaku+Gothic+New&display=swap" rel="stylesheet">
-    	<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/jpg" href="/icon.jpg" />
 		<meta name="generator" content={Astro.generator} />

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -1,9 +1,9 @@
 ---
 import Layout from '../../layouts/Layout.astro';
-import { getCollection, type CollectionEntry } from 'astro:content';
+import { getCollection, type CollectionEntry, type ContentCollectionKey } from 'astro:content';
 
 // 記事一覧を取得
-const posts = (await getCollection('posts')).sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime());
+const posts = (await getCollection('posts')).sort((a: ContentCollectionKey, b: ContentCollectionKey) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime());
 ---
 
 <Layout>
@@ -40,7 +40,7 @@ const posts = (await getCollection('posts')).sort((a, b) => new Date(b.data.pubD
 
 /* セクションタイトル */
 .section-title {
-  font-family: "Varela Round", sans-serif;
+  font-family: 'Varela Round', sans-serif;
   font-size: 2rem;
   text-align: center;
   color: #404950;

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,6 +1,6 @@
 /* ベースのスタイル */
 body {
-    font-family: "Noto Sans JP", sans-serif;
+    font-family: 'Noto Sans JP Variable', sans-serif;
     line-height: 1.6;
     margin: 0;
     padding: 0;