feat: use Noto Serif JP font

Author: calpa

src/components/Attraction/index.tsx

@@ -33,6 +33,7 @@ function Attraction(props: AttractionProps) {
 
         <Grid
           container
+          item
           xs
           sm
           sx={{

src/themes/index.ts

@@ -1,2 +1,4 @@
+import "./styles.css";
+
 export { darkTheme } from "./dark.theme";
 export { lightTheme } from "./light.theme";

src/themes/styles.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap");

src/themes/typography.ts

@@ -2,6 +2,16 @@ import { TypographyOptions } from "@mui/material/styles/createTypography";
 
 const typographyOptions: TypographyOptions = {
   fontSize: 16,
+  fontFamily: [
+    '"Noto Serif JP"',
+    "Roboto",
+    '"Helvetica Neue"',
+    "Arial",
+    "sans-serif",
+    '"Apple Color Emoji"',
+    '"Segoe UI Emoji"',
+    '"Segoe UI Symbol"',
+  ].join(","),
   h1: {
     fontSize: 24,
     fontWeight: 600,