fix fonts

social-dist0rtion-protocol · Sep 20, 2024 · 864ef09 · 864ef09
1 parent 7b6cdf8
commit 864ef09
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 207 deletions.
diff --git a/web/package.json b/web/package.json
@@ -21,6 +21,7 @@
     "@tanstack/react-query": "5.45.1",
     "@uidotdev/usehooks": "^2.4.1",
     "burner-connector": "^0.0.8",
+    "chakra-ui-markdown-renderer": "^4.1.0",
     "connectkit": "^1.8.2",
     "ethereum-ens-name": "^0.0.3",
     "ethers": "6.7.0",
@@ -31,6 +32,7 @@
     "react-markdown": "^9.0.1",
     "react-qr-code": "^2.0.15",
     "react-router-dom": "^6.26.1",
+    "rehype-raw": "^7.0.0",
     "use-local-storage": "^3.0.0",
     "viem": "^2.21.9",
     "wagmi": "latest"

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/Quest.tsx b/web/src/Quest.tsx
@@ -1,7 +1,9 @@
 import { Heading, VStack } from "@chakra-ui/react";
 import { useChapter } from "./hooks/useChapter";
 import Markdown from "react-markdown";
+import ChakraUIRenderer from "chakra-ui-markdown-renderer";
 import Puzzle from "./Puzzle";
+import rehypeRaw from "rehype-raw";
 import { checkSolutionMatch } from "./lib";
 
 function Quest() {
@@ -24,7 +26,9 @@ function Quest() {
         <Heading variant="h2">
           Chapter {currentSmartContractChapterIndex}
         </Heading>
-        <Markdown>{currentChapterContent}</Markdown>
+        <Markdown components={ChakraUIRenderer()} rehypePlugins={[rehypeRaw]}>
+          {currentChapterContent}
+        </Markdown>
       </VStack>
     </Puzzle>
   );

diff --git a/web/src/theme/fonts.css b/web/src/theme/fonts.css
@@ -3,6 +3,11 @@
   font-weight: 400;
   src: url(./fonts/BundesSans-Regular.ttf);
 }
+@font-face {
+  font-family: "Bundes";
+  font-weight: 700;
+  src: url(./fonts/BundesSans-Regular.ttf);
+}
 @font-face {
   font-family: "Dot";
   font-weight: 400;
@@ -15,7 +20,12 @@
 }
 @font-face {
   font-family: OCR;
-  font-weight: 400;
+  font-weight: 700;
+  src: url(./fonts/OCR-AStd-Regular.ttf);
+}
+@font-face {
+  font-family: OCR;
+  font-weight: 700;
   src: url(./fonts/OCR-AStd-Regular.ttf);
 }
 @font-face {

diff --git a/web/src/theme/fonts/BundesSans-Regular.ttf b/web/src/theme/fonts/BundesSans-Regular.ttf
diff --git a/web/src/theme/fonts/Dot.ttf b/web/src/theme/fonts/Dot.ttf