Font Workflow Integration

Figma to Web Fonts

Figma stores the font name used in a design but not the font file itself, so the handoff step is obtaining the licensed source font and converting it for the web. Pull the exact family and weights from the design (the Inspect panel lists them), confirm the license permits web embedding, then convert each weight to WOFF2 for delivery. For variable designs, export the variable font once rather than a file per weight.

Generate the matching @font-face CSS so the web build renders the same typeface the designer chose, and keep a WOFF fallback only if you must support legacy browsers. This keeps design and production in sync without shipping the heavy desktop originals.

Sketch Font Workflow

Sketch references system-installed fonts by name, so consistency between design and development depends on everyone using the same licensed source files. Document the family, weights, and styles as design tokens, obtain the web-licensed font, and convert to WOFF2 for deployment. Export text styles to CSS variables so type scales stay identical across the design file and the codebase, and store the converted web fonts in your shared assets repository rather than relying on each machine's local installs.

NPM Font Packages

Publishing fonts as an NPM package gives you versioning, dependency management, and reproducible builds across projects. Structure the package with the WOFF2 (and optional WOFF) files plus a stylesheet that declares the @font-face rules using package-relative paths, then version it with semver so consumers pin a known-good release.

my-fonts/
  fonts/inter-400.woff2
  fonts/inter-700.woff2
  index.css        /* @font-face rules, relative URLs */
  package.json     /* "files": ["fonts","index.css"], semver version */

GitHub Font Hosting

Git is well suited to version-controlling font files, and GitHub Pages can serve them over HTTPS for small projects. Commit the converted WOFF2 files, tag releases so you can roll back, and serve from GitHub Pages or a release asset URL with long-lived cache headers. For production traffic at scale, front the files with a CDN rather than serving directly from Pages, and always set CORS headers so cross-origin pages can load the fonts.

Automated Conversion (CI/CD)

A CI/CD pipeline removes manual font conversion from the release process. On each change to your source fonts, a job converts them to WOFF2, subsets them, regenerates the @font-face CSS, and commits or deploys the result. GitHub Actions is the common host: trigger on changes under your fonts directory, run a conversion step (fonttools or an equivalent), and publish the output.

# .github/workflows/fonts.yml
on:
  push:
    paths: ['fonts/src/**']
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: pip install fonttools brotli
      - run: python scripts/convert-fonts.py   # -> woff2 + subset + css

Font Testing & QA

Quality assurance confirms a converted font renders and performs correctly before it ships. Check that all required glyphs and OpenType features survived conversion, verify rendering across Chrome, Safari, and Firefox, and confirm the file loads without CORS errors. On the performance side, validate that WOFF2 is served, that the critical font is preloaded, and that font swapping does not cause layout shift. Automated visual-regression snapshots catch rendering changes between conversions, and a Lighthouse run flags render-blocking or oversized font payloads.