implement @font-face for file-based brand.yml fonts

fixes #12501

Author: gordonwoodhull

src/core/sass/brand.ts

@@ -18,13 +18,15 @@ import {
   BrandFont,
   // BrandFontBunny,
   BrandFontCommon,
+  BrandFontFile,
   BrandFontGoogle,
   BrandFontWeight,
   Zod,
 } from "../../resources/types/zod/schema-types.ts";
 import { Brand } from "../brand/brand.ts";
 import { darkModeDefault } from "../../format/html/format-html-info.ts";
 import { kBrandMode } from "../../config/constants.ts";
+import { join, relative } from "../../deno_ral/path.ts";
 
 const defaultColorNameMap: Record<string, string> = {
   "link-color": "link",
@@ -149,6 +151,28 @@ const googleFontImportString = (description: BrandFontGoogle) => {
   }:${styleString}wght@${weights}&display=${display}');`;
 };
 
+const fileFontImportString = (brand: Brand, description: BrandFontFile) => {
+  const pathPrefix = relative(brand.projectDir, brand.brandDir);
+  const parts = [];
+  for (const file of description.files) {
+    let path, weight, style;
+    if (typeof file === "string") {
+      path = file;
+    } else {
+      path = file.path;
+      weight = file.weight;
+      style = file.style;
+    }
+    parts.push(`@font-face {
+    font-family: '${description.family}';
+    src: url('${join(pathPrefix, path).replace(/\\/g, '/')}');
+    font-weight: ${weight || "normal"};
+    font-style: ${style || "normal"};
+}\n`);
+  }
+  return parts.join("\n");
+};
+
 const brandColorLayer = (
   brand: Brand,
   nameMap: Record<string, string>,
@@ -352,7 +376,7 @@ const brandTypographyLayer = (
   const resolveBunnyFontFamily = (
     font: BrandFont[],
   ): string | undefined => {
-    let googleFamily = "";
+    let bunnyFamily = "";
     for (const _resolvedFont of font) {
       const safeResolvedFont = Zod.BrandFontBunny.safeParse(_resolvedFont);
       if (!safeResolvedFont.success) {
@@ -367,19 +391,49 @@ const brandTypographyLayer = (
       if (!thisFamily) {
         continue;
       }
-      if (googleFamily === "") {
-        googleFamily = thisFamily;
-      } else if (googleFamily !== thisFamily) {
+      if (bunnyFamily === "") {
+        bunnyFamily = thisFamily;
+      } else if (bunnyFamily !== thisFamily) {
         throw new Error(
-          `Inconsistent Google font families found: ${googleFamily} and ${thisFamily}`,
+          `Inconsistent Bunny font families found: ${bunnyFamily} and ${thisFamily}`,
         );
       }
       typographyImports.add(bunnyFontImportString(resolvedFont));
     }
-    if (googleFamily === "") {
+    if (bunnyFamily === "") {
       return undefined;
     }
-    return googleFamily;
+    return bunnyFamily;
+  };
+
+  const resolveFileFontFamily = (
+    brand: Brand,
+    font: BrandFont[],
+  ): string | undefined => {
+    let fileFamily = "";
+    for (const _resolvedFont of font) {
+      const safeResolvedFont = Zod.BrandFontFile.safeParse(_resolvedFont);
+      if (!safeResolvedFont.success) {
+        return undefined;
+      }
+      const resolvedFont = safeResolvedFont.data;
+      const thisFamily = resolvedFont.family;
+      if (!thisFamily) {
+        continue;
+      }
+      if (fileFamily === "") {
+        fileFamily = thisFamily;
+      } else if (fileFamily !== thisFamily) {
+        throw new Error(
+          `Inconsistent Files font families found: ${fileFamily} and ${thisFamily}`,
+        );
+      }
+      typographyImports.add(fileFontImportString(brand, resolvedFont));
+    }
+    if (fileFamily === "") {
+      return undefined;
+    }
+    return fileFamily;
   };
 
   type HTMLFontInformation = { [key: string]: unknown };
@@ -410,7 +464,7 @@ const brandTypographyLayer = (
     const font = getFontFamilies(family);
     result.family = resolveGoogleFontFamily(font) ??
       resolveBunnyFontFamily(font) ??
-      // resolveFilesFontFamily(font) ??
+      resolveFileFontFamily(brand, font) ??
       family;
     for (
       const entry of [

tests/docs/smoke-all/brand/logo/source-sans-pro/.gitignore

@@ -0,0 +1,2 @@
+*.html
+*_files/

tests/docs/smoke-all/brand/logo/source-sans-pro/_brand.yml

@@ -0,0 +1,17 @@
+typography:
+  fonts:
+    - family: "Source Sans Pro"
+      source: file
+      files:
+        - fonts/source-sans-pro/source-sans-pro-regular.woff
+        - path: fonts/source-sans-pro/source-sans-pro-italic.woff
+          style: italic
+        - path: fonts/source-sans-pro/source-sans-pro-semibold.woff
+          weight: 600
+        - path: fonts/source-sans-pro/source-sans-pro-semibolditalic.woff
+          style: italic
+          weight: 600
+  base:
+    family: Source Sans Pro
+    line-height: 1.25
+    size: 1rem

tests/docs/smoke-all/brand/logo/source-sans-pro/brand.yml

@@ -0,0 +1,28 @@
+typography:
+  fonts:
+    - family: "Source Sans Pro"
+      source: file
+      files:
+        - path: fonts/source-sans-pro/source-sans-pro-regular.woff
+
+    - family: "Fira Code"
+      source: file
+      files:
+        - fonts/firacode/FiraCode-VF.ttf
+    - family: "Roboto Slab"
+      source: file
+      files:
+        - path: fonts/robotoslab/RobotoSlab-VariableFont_wght.ttf
+          weight: 600
+          style: normal
+  base:
+    family: Source Sans Pro
+    line-height: 1.25
+    size: 1rem
+  headings:
+    family: Roboto Slab
+    color: primary
+    weight: 600
+  monospace:
+    family: Fira Code
+    size: 0.9em

tests/docs/smoke-all/brand/logo/source-sans-pro/fonts/source-sans-pro/source-sans-pro-italic.woff

@@ -0,0 +1,14 @@
+---
+title: Source Sans Pro
+---
+
+This text **should be** in Source Sans Pro, _and_ some ***variants***.
+
+{{< lipsum 1 >}}
+
+**{{< lipsum 1 >}}**
+
+*{{< lipsum 1 >}}*
+
+***{{< lipsum 1 >}}***
+

tests/docs/smoke-all/brand/logo/source-sans-pro/fonts/source-sans-pro/source-sans-pro-regular.woff

@@ -1,10 +1,12 @@
 ---
 title: title is `#context text.font`{=typst} `#context text.weight`{=typst} `#context text.style`{=typst} `#context text.size`{=typst}
-format: typst
+format:
+  typst:
+    include-in-header:
+      text: |
+        #set text(fallback: false)
+  html: default
 brand: branding/brand.yml
-include-in-header:
-  text: |
-    #set text(fallback: false)
 _quarto:
   tests:
     typst: