Google Fonts Metadata & Preview SVGs
A utility repository that enhances Google Fonts for design tools by providing:
- 🎨 Baked SVG Previews: Pre-rendered SVG previews of all Google Fonts variants
- 📊 Enhanced Metadata: Additional metadata for design tools, including PostScript name mappings
- 🎭 Apple Color Emoji PNG Files: High-quality emoji images for consistent cross-platform rendering
- Pre-rendered SVG previews for all Google Fonts variants
- Optimized for design tools and web applications
- Available via S3 bucket: https://s3.us-west-1.amazonaws.com/google.fonts/index.html
- Accurate PostScript name to variant mappings
- Browser-style name generation
- Validation tools for font metadata
- Available via S3 bucket: https://s3.us-west-1.amazonaws.com/google.fonts/index.html
Source: Google Fonts API
This file contains the official Google Fonts API data, including:
- Font family information
- Available variants
- CDN URLs for each variant
- Font metadata (category, version, etc.)
Example:
{
"items": [
{
"family": "Roboto",
"variants": ["regular", "italic", "700", "700italic"],
"files": {
"regular": "https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.ttf",
"italic": "https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xIIzI.ttf",
"700": "https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.ttf",
"700italic": "https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.ttf"
}
}
]
}Source: Google Fonts API with VF capability
This file contains the Google Fonts API data specifically for variable fonts, including:
- Variable font file URLs instead of static font combinations
- Axis range metadata for variable font capabilities
- Font family information and variants
- CDN URLs for variable font files
Based on the Google Fonts Developer API, when capability=VF is set, the API returns variable font files instead of static ones along with available axes range metadata.
Example:
{
"items": [
{
"family": "Noto Sans Display",
"variants": ["regular", "italic"],
"files": {
"regular": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLplK4fy6r6tOBEJg0IAKzqdFZVZxokvfn_BDLxR.ttf",
"italic": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpjK4fy6r6tOBEJg0IAKzqdFZVZxrktdHvjCaxRgew.ttf"
},
"axes": [
{
"tag": "wdth",
"start": 62.5,
"end": 100
},
{
"tag": "wght",
"start": 100,
"end": 900
}
]
}
]
}Generated by our mapping tools, this file extends webfonts.json with:
- PostScript name mappings for each variant
- Browser-style name mappings
- Additional metadata for design tools
Example:
{
"Roboto": {
"family": "Roboto",
"post_script_names": {
"Roboto-Regular": "regular",
"Roboto-Italic": "italic",
"Roboto-Bold": "700",
"Roboto-BoldItalic": "700italic"
},
"files": {
"regular": "https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.ttf",
"italic": "https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xIIzI.ttf",
"700": "https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.ttf",
"700italic": "https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.ttf"
}
}
}This repository includes font data from the following vendors:
| Vendor | Source | Description | Notes |
|---|---|---|---|
| Google Fonts | /vendor/google |
Official Google Fonts repository | Contains all Google Fonts families, variants, and metadata |
| Apple Emoji Linux | /vendor/apple-emoji-linux |
AppleColorEmoji font implementation for Linux | Important: We do not serve AppleColorEmoji.ttf files as they are proprietary and protected by Apple's EULA. We respect Apple's intellectual property rights and only provide the open-source implementation tools for Linux compatibility. |
This repository and its S3 bucket are primarily intended for internal use by Grida. However, we welcome other design tool providers to use it. Please note that the structure and content may change without notice.
Please let us know by creating an issue with the following information:
- Your company name
- Your company website
- Your contact email
- How you are using it
This helps us:
- Track usage and impact
- Notify you of any breaking changes
- Understand your use case better
See the metadata/README.md for development tools and commands.
