diff --git a/package-lock.json b/package-lock.json
index 333205e..6b02215 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@astrojs/mdx": "^2.0.1",
         "@astrojs/sitemap": "^3.0.3",
         "@astrojs/tailwind": "^5.0.3",
+        "@fontsource/inter": "^5.0.18",
         "@pagefind/default-ui": "^1.1.0",
         "@tailwindcss/typography": "^0.5.10",
         "astro": "^4.0.4",
@@ -1003,6 +1004,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/@fontsource/inter": {
+      "version": "5.0.18",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.18.tgz",
+      "integrity": "sha512-YCsoYPTcs713sI7tLtxaPrIhXAXvEetGg5Ry02ivA8qUOb3fQHojbK/X9HLD5OOKvFUNR2Ynkwb1kR1hVKQHpw=="
+    },
     "node_modules/@glideapps/ts-necessities": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@glideapps/ts-necessities/-/ts-necessities-2.1.3.tgz",
diff --git a/package.json b/package.json
index 07e9d38..098062b 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@astrojs/mdx": "^2.0.1",
     "@astrojs/sitemap": "^3.0.3",
     "@astrojs/tailwind": "^5.0.3",
+    "@fontsource/inter": "^5.0.18",
     "@pagefind/default-ui": "^1.1.0",
     "@tailwindcss/typography": "^0.5.10",
     "astro": "^4.0.4",
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index c64598a..9cbc8b2 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -7,6 +7,8 @@ import type {
 } from 'schema-dts'
 import GoogleAnalytics from '@/components/layout/GoogleAnalytics.astro'
 import StructuredData from '@/components/layout/StructuredData.astro'
+// @fontsource はサブセット化が行われているのでcssをインポートするだけで良い
+import '@fontsource/inter'
 
 export interface Props {
   title?: string
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 888f3e5..18cb9b5 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,5 +1,6 @@
 const { rgba } = require('polished')
 const plugin = require('tailwindcss/plugin')
+const { fontFamily } = require('tailwindcss/defaultTheme')
 
 const colors = {
   primary: '#1a2872',
@@ -53,6 +54,9 @@ module.exports = {
           },
         },
       }),
+      fontFamily: {
+        sans: ['Inter', ...fontFamily.sans],
+      },
     },
   },
   plugins: [