Commit `e913667`

HPCesia <me@hpcesia.com>

2026-08-10 17:22:59

Math block style and math font

I prefer Typst's default math font New Computers Modern Math, but it not exsisted in any Astro builtin remote font providers. So use STIX Two Math instead.

main

1 parent 23ed98a

Changed files (4)

src

layouts

BaseLayout.astro

styles

article

index.scss

math.scss

astro.config.ts

@@ -1,4 +1,6 @@
 ---
+import { Font } from "astro:assets";
+
 import { SITE_CONFIG } from "@/config";
 
 import Footer from "@/components/Footer.astro";
@@ -33,6 +35,8 @@ const {
     <meta name="title" content={title} />
     <meta name="description" content={description} />
     <meta name="author" content={author} />
+
+    <Font cssVariable="--font-stix-two-math" />
   </head>
   <body>
     <Header />

@@ -1,1 +1,2 @@
+@use "./math.scss";
 @use "./raw.scss";

@@ -0,0 +1,10 @@
+article math {
+  font-family: "STIX Two Math", var(--font-stix-two-math), math;
+
+  &[display="block"] {
+    /* MathML overflow is not supported in Firefox */
+    /* See https://bugzilla.mozilla.org/show_bug.cgi?id=1928784 */
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+}

@@ -1,4 +1,4 @@
-import { defineConfig } from "astro/config";
+import { defineConfig, fontProviders } from "astro/config";
 
 import { typst } from "astro-typst";
 
@@ -20,6 +20,15 @@ export default defineConfig({
       target: "html",
     }),
   ],
+  fonts: [
+    {
+      provider: fontProviders.google(),
+      name: "STIX Two Math",
+      cssVariable: "--font-stix-two-math",
+      fallbacks: [],
+      subsets: ["menu"],
+    },
+  ],
   vite: {
     ssr: {
       external: ["@myriaddreamin/typst-ts-node-compiler"],

Commit e913667

Commit `e913667`