Custom fonts

1
const res = await fetch(
2
  `https://api.webflow.com/v2/sites/${siteId}/custom_fonts/batchCreate`,
3
  {
4
    method: 'POST',
5
    headers: {
6
      Authorization: `Bearer ${accessToken}`,
7
      'Content-Type': 'application/json',
8
    },
9
    body: JSON.stringify({
10
      items: [
11
        { fileName: 'AcmeSans-Regular.woff2', fileHash: regularHash, fontFamily: 'Acme Sans', weight: 400, italic: false, fontDisplay: 'swap' },
12
        { fileName: 'AcmeSans-Bold.woff2', fileHash: boldHash, fontFamily: 'Acme Sans', weight: 700, italic: false, fontDisplay: 'swap' },
13
      ],
14
    }),
15
  },
16
);
17
18
const { created, failed } = await res.json();
19
// res.status === 200
20
// Upload each created[i].upload the same way as a single-font upload.

1
import { createHash } from 'node:crypto';
2
import { readFile } from 'node:fs/promises';
3
4
async function uploadFontToSite({ siteId, accessToken, filePath, metadata }) {
5
  const buf = await readFile(filePath);
6
  const fileHash = createHash('md5').update(buf).digest('hex');
7
8
  // Step 1 — register with Webflow
9
  const registerRes = await fetch(
10
    `https://api.webflow.com/v2/sites/${siteId}/custom_fonts`,
11
    {
12
      method: 'POST',
13
      headers: {
14
        Authorization: `Bearer ${accessToken}`,
15
        'Content-Type': 'application/json',
16
      },
17
      body: JSON.stringify({
18
        fileName: metadata.fileName,
19
        fileHash,
20
        fontFamily: metadata.fontFamily,
21
        weight: metadata.weight,
22
        italic: metadata.italic,
23
        fontDisplay: metadata.fontDisplay ?? 'swap',
24
        axes: metadata.axes ?? [],
25
      }),
26
    },
27
  );
28
29
  if (!registerRes.ok) {
30
    const err = await registerRes.json();
31
    throw new Error(`[${err.name}] ${err.msg}`);
32
  }
33
34
  const { customFont, upload } = await registerRes.json();
35
36
  // Step 2 — POST the binary directly to S3
37
  const form = new FormData();
38
  for (const [k, v] of Object.entries(upload.fields)) form.append(k, v);
39
  form.append('file', new Blob([buf]), metadata.fileName); // 'file' must be last
40
41
  const s3Res = await fetch(upload.url, { method: 'POST', body: form });
42
  if (s3Res.status !== 201) throw new Error(`S3 upload failed: ${s3Res.status}`);
43
44
  return customFont;
45
}

1
async function syncBrandFonts({ targetSiteId, accessToken, brandKit }) {
2
  const headers = {
3
    Authorization: `Bearer ${accessToken}`,
4
    'Content-Type': 'application/json',
5
  };
6
7
  // List the target site's existing fonts
8
  const listRes = await fetch(
9
    `https://api.webflow.com/v2/sites/${targetSiteId}/custom_fonts`,
10
    { headers },
11
  );
12
  const { customFonts: existing } = await listRes.json();
13
14
  // Identify fonts on the target that are not in the brand kit
15
  const brandFamilies = new Set(brandKit.map((f) => f.fontFamily));
16
  const toRemove = existing
17
    .filter((f) => !brandFamilies.has(f.fontFamily))
18
    .map((f) => ({ id: f.id }));
19
20
  // Bulk-delete the non-brand fonts
21
  if (toRemove.length > 0) {
22
    const delRes = await fetch(
23
      `https://api.webflow.com/v2/sites/${targetSiteId}/custom_fonts/batchDelete`,
24
      { method: 'POST', headers, body: JSON.stringify({ items: toRemove }) },
25
    );
26
    const { deleted, failed } = await delRes.json();
27
    console.log(`Removed ${deleted.length}; ${failed.length} could not be removed.`);
28
  }
29
30
  // Upload missing brand fonts
31
  const existingFamilies = new Set(existing.map((f) => f.fontFamily));
32
  for (const font of brandKit) {
33
    if (existingFamilies.has(font.fontFamily)) continue;
34
    await uploadFontToSite({
35
      siteId: targetSiteId,
36
      accessToken,
37
      filePath: font.localPath,
38
      metadata: font,
39
    });
40
  }
41
}

1
async function agentSetupTypography({ siteId, accessToken, brandFontPath, brandFontMeta }) {
2
  // 1. Upload the brand font
3
  const customFont = await uploadFontToSite({
4
    siteId,
5
    accessToken,
6
    filePath: brandFontPath,
7
    metadata: brandFontMeta,
8
  });
9
10
  // 2. Verify that the font is reachable through the API before downstream steps
11
  const verifyRes = await fetch(
12
    `https://api.webflow.com/v2/sites/${siteId}/custom_fonts/${customFont.id}`,
13
    { headers: { Authorization: `Bearer ${accessToken}` } },
14
  );
15
  if (!verifyRes.ok) {
16
    throw new Error('Font upload completed but resource is not yet readable.');
17
  }
18
19
  return customFont;
20
}