Merge pull request #167 from traPtitech/feat/use-fontsource-variable

kitsne241 · web-flow · commit 1e87a4bdfe74 · 2026-01-03T23:36:18.000+09:00
Feat/use fontsource variable
diff --git a/index.html b/index.html
@@ -8,25 +8,6 @@
     <meta name="apple-mobile-web-app-title" content="rucQ" />
     <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <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=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=M+PLUS+Code+Latin:wdth,wght@120,100..700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap"
-      rel="stylesheet"
-    />
     <title>rucQ</title>
   </head>
   <body>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,10 @@
     "generate:api": "npx openapi-typescript https://raw.githubusercontent.com/traPtitech/rucQ/main/openapi.yaml -o src/api/schema.d.ts && npm run format"
   },
   "dependencies": {
+    "@fontsource-variable/m-plus-2": "^5.2.9",
+    "@fontsource-variable/m-plus-code-latin": "^5.2.7",
+    "@fontsource-variable/reddit-sans": "^5.2.7",
+    "@fontsource-variable/roboto": "^5.2.9",
     "@mdi/font": "^7.4.47",
     "@tanstack/query-async-storage-persister": "^5.85.9",
     "@tanstack/query-persist-client-core": "^5.85.9",
diff --git a/src/components/event/EventDialog.vue b/src/components/event/EventDialog.vue
@@ -94,7 +94,7 @@ const planner = computed(() => {
 }
 
 .timeInfo {
-  font-family: Roboto;
+  font-family: 'Roboto Variable';
   font-weight: 500;
   font-size: 13px;
 }
@@ -108,7 +108,7 @@ const planner = computed(() => {
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.05em;
-  font-family: 'Reddit Sans';
+  font-family: 'Reddit Sans Variable';
   font-variant-ligatures: none;
 }
 
diff --git a/src/components/event/ScheduleRow.vue b/src/components/event/ScheduleRow.vue
@@ -74,7 +74,7 @@ const momentEvent = computed(() => {
   margin-top: 1px;
   font-weight: 900;
   width: fit-content;
-  font-family: Roboto;
+  font-family: 'Roboto Variable';
 }
 
 .line {
diff --git a/src/components/information/QuestionGroupEditor.vue b/src/components/information/QuestionGroupEditor.vue
@@ -131,7 +131,7 @@ const answerModel = (questionId: number) =>
 }
 
 .deadline {
-  font-family: 'Reddit Sans';
+  font-family: 'Reddit Sans Variable';
   margin-right: 6px;
   font-size: 16px;
   font-weight: bold;
diff --git a/src/components/information/RoomInfo.vue b/src/components/information/RoomInfo.vue
@@ -38,7 +38,7 @@ defineProps<{ room?: Room }>()
 }
 
 .room {
-  font-family: 'Reddit Sans';
+  font-family: 'Reddit Sans Variable';
   font-size: 30px;
   font-weight: 800;
   letter-spacing: 3px;
diff --git a/src/components/markdown/MarkdownEditor.vue b/src/components/markdown/MarkdownEditor.vue
@@ -139,7 +139,7 @@ const enclose = (symbol: string) => {
   color: var(--color-text);
   width: 100%;
   height: 100%;
-  font-family: 'M PLUS Code Latin', 'M PLUS 1p';
+  font-family: 'M PLUS Code Latin Variable', 'M PLUS 2 Variable';
   font-weight: 400;
   display: flex;
 }
@@ -182,7 +182,7 @@ const enclose = (symbol: string) => {
   top: 0px;
   width: 100%;
   padding-bottom: 4em;
-  font-family: 'M PLUS Code Latin', 'M PLUS 1p';
+  font-family: 'M PLUS Code Latin Variable', 'M PLUS 2 Variable';
   z-index: 0;
 }
 
diff --git a/src/components/markdown/MarkdownPreview.vue b/src/components/markdown/MarkdownPreview.vue
@@ -182,7 +182,7 @@ onMounted(async () => {
 }
 
 .preview :global(code) {
-  font-family: 'M PLUS Code Latin 60', 'M PLUS 1p';
+  font-family: 'M PLUS Code Latin Variable', 'M PLUS 2 Variable';
   font-weight: 500;
   font-size: 10pt;
 }
diff --git a/src/main.ts b/src/main.ts
@@ -9,6 +9,11 @@ import 'vuetify/styles'
 import '@mdi/font/css/materialdesignicons.css'
 import { useUserStore, useCampStore } from './store'
 
+import '@fontsource-variable/m-plus-2' // 'M PLUS 2 Variable'
+import '@fontsource-variable/m-plus-code-latin' // 'M PLUS Code Latin Variable'
+import '@fontsource-variable/reddit-sans' // 'Reddit Sans Variable'
+import '@fontsource-variable/roboto' // 'Roboto Variable'
+
 import App from './App.vue'
 import './styles/main.scss'
 
@@ -24,7 +29,6 @@ app.use(pinia)
 app.use(vuetify)
 app.use(VueQueryPlugin, { queryClient })
 
-
 async function initializeApp() {
   if (import.meta.env.DEV && import.meta.env.MODE !== 'staging') {
     const { worker } = await import('./mocks/browser')
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -10,7 +10,7 @@
 body {
   min-height: 100vh;
   line-height: 1.6;
-  font-family: 'M PLUS 1p', sans-serif;
+  font-family: 'M PLUS 2 Variable', sans-serif;
   font-size: 14px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
@@ -1,6 +1,6 @@
 @use 'vuetify/settings' with (
   $body-font-family: (
-    'M PLUS 1p',
+    'M PLUS 2 Variable',
     sans-serif,
   )
 );
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
@@ -28,7 +28,7 @@ import BackgroundPattern from '@/components/generic/BackgroundPattern.vue'
 .path {
   padding: 0px 20px;
   font-size: 24px;
-  font-family: 'M PLUS Code Latin';
+  font-family: 'M PLUS Code Latin Variable';
   border-radius: 6px;
   border: 1px solid white;
 }
diff --git a/src/views/RoomInfoView.vue b/src/views/RoomInfoView.vue
@@ -152,7 +152,7 @@ const {
 }
 
 .roomName {
-  font-family: 'Reddit Sans';
+  font-family: 'Reddit Sans Variable';
   font-size: 20px;
   font-weight: 800;
   letter-spacing: 0.1em;
diff --git a/vite.config.ts b/vite.config.ts
@@ -71,20 +71,6 @@ export default defineConfig(({ mode }) => {
         // Service Worker
         workbox: {
           globPatterns: ['**/*.{js,css,html,svg,png,jpg,webp,woff2}'],
-          runtimeCaching: [
-            {
-              // フォント
-              urlPattern: ({ request }) => request.destination === 'font',
-              handler: 'CacheFirst',
-              options: {
-                cacheName: 'fonts-cache',
-                expiration: {
-                  maxEntries: 50,
-                  maxAgeSeconds: 60 * 60 * 24 * 365, // 1年
-                },
-              },
-            },
-          ],
         },
         devOptions: { enabled: true },
       }),

Original file line number	Diff line number	Diff line change
`@@ -94,7 +94,7 @@ const planner = computed(() => {`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`.timeInfo {`
`97`		`- font-family: Roboto;`
	`97`	`+ font-family: 'Roboto Variable';`
`98`	`98`	`font-weight: 500;`
`99`	`99`	`font-size: 13px;`
`100`	`100`	`}`
`@@ -108,7 +108,7 @@ const planner = computed(() => {`
`108`	`108`	`font-size: 12px;`
`109`	`109`	`font-weight: 500;`
`110`	`110`	`letter-spacing: 0.05em;`
`111`		`- font-family: 'Reddit Sans';`
	`111`	`+ font-family: 'Reddit Sans Variable';`
`112`	`112`	`font-variant-ligatures: none;`
`113`	`113`	`}`
`114`	`114`
Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@ const momentEvent = computed(() => {`
`74`	`74`	`margin-top: 1px;`
`75`	`75`	`font-weight: 900;`
`76`	`76`	`width: fit-content;`
`77`		`- font-family: Roboto;`
	`77`	`+ font-family: 'Roboto Variable';`
`78`	`78`	`}`
`79`	`79`
`80`	`80`	`.line {`
Original file line number	Diff line number	Diff line change
`@@ -131,7 +131,7 @@ const answerModel = (questionId: number) =>`
`131`	`131`	`}`
`132`	`132`
`133`	`133`	`.deadline {`
`134`		`- font-family: 'Reddit Sans';`
	`134`	`+ font-family: 'Reddit Sans Variable';`
`135`	`135`	`margin-right: 6px;`
`136`	`136`	`font-size: 16px;`
`137`	`137`	`font-weight: bold;`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ defineProps<{ room?: Room }>()`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`.room {`
`41`		`- font-family: 'Reddit Sans';`
	`41`	`+ font-family: 'Reddit Sans Variable';`
`42`	`42`	`font-size: 30px;`
`43`	`43`	`font-weight: 800;`
`44`	`44`	`letter-spacing: 3px;`
Original file line number	Diff line number	Diff line change
`@@ -182,7 +182,7 @@ onMounted(async () => {`
`182`	`182`	`}`
`183`	`183`
`184`	`184`	`.preview :global(code) {`
`185`		`- font-family: 'M PLUS Code Latin 60', 'M PLUS 1p';`
	`185`	`+ font-family: 'M PLUS Code Latin Variable', 'M PLUS 2 Variable';`
`186`	`186`	`font-weight: 500;`
`187`	`187`	`font-size: 10pt;`
`188`	`188`	`}`