Skip to content

Add variable fonts data to Google Fonts database #5447

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Jun 20, 2025

This PR enhances the Google Fonts package to include comprehensive variable font information, adding axis data for 30+ popular variable fonts.

Changes Made

🎯 Enhanced Type System

  • Added FontAxis type with tag, name, min, max, default properties
  • Extended Font type with isVariable boolean and optional axes array
  • Maintains full backward compatibility with existing code

📊 Comprehensive Variable Fonts Database

Added detailed axis information for 30+ popular variable fonts including:

  • Inter - Weight axis (100-900)
  • Roboto Flex - 13 axes including Grade, Opaque, Width, Slant, Optical Size
  • Open Sans - Width and Weight axes
  • DM Sans - Optical Size and Weight axes
  • Recursive - Casual, Cursive, Monospace, Slant, Weight axes
  • And 25+ more fonts with standard axes (wght, wdth, slnt, opsz)

🛡️ Robust Error Handling

  • Stops gracefully when API key is denied (403) or invalid (400) as requested
  • Clear error messages for different API failure scenarios
  • Validates response structure before processing

🧪 Comprehensive Testing

  • 6 test suites with 76 assertions covering:
    • Variable font detection logic
    • Type safety validation
    • Real-world usage patterns
    • Edge case handling

Usage Example

import { googleFonts } from '@remotion/google-fonts';

// Find all variable fonts
const variableFonts = googleFonts.filter(font => font.isVariable);

// Get axis information for Inter
const inter = googleFonts.find(font => font.family === 'Inter');
if (inter?.isVariable && inter.axes) {
  console.log(inter.axes);
  // Output: [{ tag: 'wght', name: 'Weight', min: 100, max: 900, default: 400 }]
}

// Access complex variable font data
const robotoFlex = googleFonts.find(font => font.family === 'Roboto Flex');
console.log(robotoFlex?.axes?.length); // 13 axes available

API Key Requirement

The update script now properly handles API key requirements and stops with clear error messages when access is denied, as specified in the issue.

# Set your Google Fonts API key
export GOOGLE_FONTS_API_KEY=your_api_key_here
bun scripts/update-font-db.ts

Fixes #5446.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copy link

vercel bot commented Jun 20, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
bugs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 20, 2025 3:13pm
remotion ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 20, 2025 3:13pm

Copilot AI and others added 2 commits June 20, 2025 15:08
@Copilot Copilot AI changed the title [WIP] Add variable fonts data to Google Fonts database Add variable fonts data to Google Fonts database Jun 20, 2025
@Copilot Copilot AI requested a review from JonnyBurger June 20, 2025 15:11
Copilot finished work on behalf of JonnyBurger June 20, 2025 15:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add variable fonts data to Google Fonts database
2 participants