#24

frontend/src/components/ErrorScreen.tsx

@@ -1,5 +1,6 @@
 import { Helmet } from 'react-helmet-async'
 
+import nikumaru from '@/assets/fonts/nikumaru.otf'
 import errorImg from '@/assets/images/not-found.gif'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
@@ -30,12 +31,21 @@ export default ({ status }: Props) => {
       <MainArea>
 	<Helmet>
 	  <meta name="robots" content="noindex" />
+	  <style>
+	    {`
+		@font-face
+		{
+		  font-family: 'MyFont';
+		  src: url(${ nikumaru }) format('opentype');
+		}`}
+	  </style>
 	  <title>{title} | {SITE_TITLE}</title>
 	</Helmet>
 	<div className="text-6xl font-bold text-transparent whitespace-nowrap
 			bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
 			bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]
-			space-y-6 text-center flex flex-col justify-center items-center">
+			space-y-6 text-center flex flex-col justify-center items-center"
+	     style={{ fontFamily: 'MyFont' }}>
 	  <p>{status}</p>
 	  <div className="flex space-x-4">
 	    <p style={{ writingMode: 'vertical-rl' }}>{leftMsg}</p>