Try to fix fonts, unsure

bskyogcard/src/components/Post/index.tsx

@@ -81,7 +81,7 @@ export function Post({
               moderatorData={moderatorData}
             />
             <Box cx={[a.flex_col]}>
-              <Text cx={[a.text_md, a.font_bold, a.pb_2xs]}>
+              <Text cx={[a.text_md, a.font_heavy, a.pb_2xs]}>
                 {post.author.displayName || post.author.handle}
               </Text>
               <Text cx={[a.text_sm, t.atoms.text_contrast_medium]}>

bskyogcard/src/components/Text.tsx

@@ -21,6 +21,10 @@ export function Text({
     a.leading_tight,
     a.tracking_wide,
     t.atoms.text,
+    {
+      fontFamily: 'Inter',
+      fontWeight: 400,
+    },
     ...(cx ?? []),
   ])
   styles.fontSize = (styles.fontSize || a.text_md.fontSize) * SCALE_MULTIPLIER

bskyogcard/src/context.ts

@@ -1,12 +1,7 @@
-import {readdirSync, readFileSync} from 'node:fs'
-import * as path from 'node:path'
-import {fileURLToPath} from 'node:url'
-
 import {AtpAgent} from '@atproto/api'
 
 import {Config} from './config.js'
-
+import {getFontFiles,readFonts} from './util/fonts.js'
-const __DIRNAME = path.dirname(fileURLToPath(import.meta.url))
 
 export type AppContextOptions = {
   cfg: Config
@@ -28,19 +23,8 @@ export class AppContext {
 
   static async fromConfig(cfg: Config, overrides?: Partial<AppContextOptions>) {
     const appviewAgent = new AtpAgent({service: cfg.service.appviewUrl})
-    const fontDirectory = path.join(__DIRNAME, 'assets', 'fonts')
+    const fontFiles = getFontFiles()
-    const fontFiles = readdirSync(fontDirectory)
+    const fonts = readFonts(fontFiles)
-    const fonts = fontFiles.map(file => {
-      const basename = path.basename(file, path.extname(file))
-      const italic = basename.includes('Italic')
-      const [weight, name] = basename.split('-')
-      return {
-        name,
-        data: readFileSync(path.join(fontDirectory, file)),
-        weight: parseInt(weight),
-        style: italic ? 'italic' : 'normal',
-      }
-    })
     return new AppContext({
       cfg,
       appviewAgent,

bskyogcard/src/routes/post.tsx

@@ -10,6 +10,7 @@ import {getPost} from '../data/getPost.js'
 import {getPostData} from '../data/getPostData.js'
 import {httpLogger} from '../logger.js'
 import {loadEmojiAsSvg} from '../util.js'
+import {getFontFiles} from '../util/fonts.js'
 import {
   getRenderOptions,
   parseDisplayOptionsFromQuery,
@@ -65,6 +66,10 @@ export default function (ctx: AppContext, app: Express) {
           },
         )
         const output = await resvg.renderAsync(svg, {
+          font: {
+            fontFiles: getFontFiles(),
+            defaultFontFamily: 'Inter',
+          },
           fitTo: {
             mode: 'width',
             value: width * 2,

bskyogcard/src/util/fonts.ts

@@ -0,0 +1,25 @@
+import {readdirSync, readFileSync} from 'node:fs'
+import * as path from 'node:path'
+
+const __DIRNAME = path.join(process.cwd(), 'src')
+
+export function getFontFiles() {
+  const fontDirectory = path.join(__DIRNAME, 'assets', 'fonts')
+  return readdirSync(fontDirectory)
+    .filter(file => file.endsWith('.ttf'))
+    .map(file => path.join(fontDirectory, file))
+}
+
+export function readFonts(fontFiles: string[]) {
+  return fontFiles.map(file => {
+    const basename = path.basename(file, path.extname(file))
+    const italic = basename.includes('Italic')
+    const [weight, name] = basename.split('-')
+    return {
+      name,
+      data: readFileSync(file),
+      weight: parseInt(weight),
+      style: italic ? 'italic' : 'normal',
+    }
+  })
+}