Merge pull request #13 from florian-lefebvre/fix/font-weight-and-types

fix: font weight issue and types improvements
rishi-raj-jain · Apr 5, 2024 · ca10672 · ca10672
2 parents ca7089f + 1105144
commit ca10672
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/packages/astro-font/utils.ts b/packages/astro-font/utils.ts
@@ -5,23 +5,26 @@ import { Buffer } from 'node:buffer'
 import { getFallbackMetricsFromFontFile } from './font.ts'
 import { pickFontFileForFallbackGeneration } from './fallback.ts'
 
-interface Record {
-  [property: string]: string
-}
+type GlobalValues = "inherit" | "initial" | "revert" | "revert-layer" | "unset"
+
+type FontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
 
 interface Source {
   path: string
-  css?: Record
-  style: string
+  css?: Record<string, string>
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
+  style: "normal" | "italic" | "oblique" | `oblique ${number}deg` | GlobalValues | {}
   preload?: boolean
-  weight?: string | number
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+  weight?: "normal" | "bold" | "lighter" | "bolder" | GlobalValues | FontWeight | `${FontWeight}` | {}
 }
 
 interface Config {
   name: string
   src: Source[]
   fetch?: boolean
-  display: string
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
+  display: "auto" | "block" | "swap" | "fallback" | "optional" | {}
   verbose?: boolean
   selector?: string
   preload?: boolean
@@ -227,7 +230,7 @@ export async function generateFonts(fontCollection: Config[]): Promise<Config[]>
   return duplicatedCollection
 }
 
-async function getFallbackFont(fontCollection: Config): Promise<Record> {
+async function getFallbackFont(fontCollection: Config): Promise<Record<string, string>> {
   const fonts: any[] = []
   let writeAllowed, tmpDir, cachedFilePath, cacheDir
   const [os, fs] = await Promise.all([getOS(), getFS()])
@@ -256,7 +259,7 @@ async function getFallbackFont(fontCollection: Config): Promise<Record> {
           if (res) {
             fonts.push({
               style: i.style,
-              weight: i.weight,
+              weight: i.weight?.toString(),
               metadata: create(res),
             })
           }

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -16,14 +16,15 @@ import { AstroFont } from 'astro-font'
           basePath: './public',
           src: [
             {
-              style: 'bold',
+              style: 'normal',
+              weight: 'bold',
               // (Optional) but ensures that it is preloaded
               preload: true,
               path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2',
             },
             {
-              weight: '500',
-              style: 'medium',
+              weight: 500,
+              style: 'normal',
               // (Optional) but does not preload this specifically
               preload: true,
               path: './public/fonts/Afacad-Medium.ttf',

diff --git a/src/pages/second.astro b/src/pages/second.astro
@@ -25,7 +25,7 @@ import { AstroFont } from 'astro-font'
             // },
             {
               weight: '500',
-              style: 'medium',
+              style: 'normal',
               // (Optional) but does not preload this specifically
               preload: false,
               path: join(process.cwd(), 'public', 'fonts', 'Afacad-Medium.ttf'),