Google Fonts Parameter

Load and use any Google Font in your generated images.

Parameter Details

Name	Type	Required	Description
google_fonts	`String`	No	The names of Google Fonts to load, separated by `\|` for multiple fonts

Usage Examples

Single Font

{
  "google_fonts": "Roboto",
  "html": "<div class='text'>Hello World</div>",
  "css": ".text { font-family: 'Roboto', sans-serif; }"
}

Multiple Fonts

{
  "google_fonts": "Open Sans|Roboto|Montserrat",
  "html": "<div class='heading'>Title</div><div class='body'>Content</div>",
  "css": `
    .heading { font-family: 'Montserrat', sans-serif; }
    .body { font-family: 'Open Sans', sans-serif; }
  `
}

Performance tip

Each additional font increases render time. Only load fonts you plan to use.

Font Weights and Styles

Specifying Font Weights

Google Fonts supports multiple weights for each font. You can specify which weights to load by including them in the google_fonts parameter.

Explicit loading: Specify the weight in the google_fonts parameter:

{
  "google_fonts": "Roboto:300,400,700",  // Load light, regular, and bold weights
  "html": "<div class='text'>Hello World</div>",
  "css": ".text { font-family: 'Roboto', sans-serif; font-weight: 700; }"
}

Common font weights:

300: Light
400: Regular (default)
500: Medium
700: Bold
900: Black

Debugging Font Weights

If your font weights aren’t appearing correctly, try these steps:

Verify available weights: Check Google Fonts to ensure the weight exists for your font

{
  "google_fonts": "Roboto:300,400,700",  // Only include weights that exist
  "html": "<div class='debug'>Weight Test</div>",
  "css": ".debug { font-family: 'Roboto'; font-weight: 700; }"
}

Force weight loading: Explicitly specify weights in the google_fonts parameter

{
  "google_fonts": "Roboto:700",  // Force load bold weight
  "html": "<div class='bold'>Bold Text</div>",
  "css": ".bold { font-family: 'Roboto'; font-weight: 700; }"
}

Check for FOUT: Add ms_delay if fonts aren’t loading in time

{
  "google_fonts": "Roboto:700",
  "ms_delay": 500,  // Give extra time for font loading
  "html": "<div class='bold'>Bold Text</div>",
  "css": ".bold { font-family: 'Roboto'; font-weight: 700; }"
}

Font weight tip

Not all fonts support all weights. Check Google Fonts for available weights before using them.

Troubleshooting

Flash of Unstyled Text (FOUT)

If fonts aren’t rendering correctly, use the ms_delay parameter to allow time for font loading:

{
  "google_fonts": "Roboto",
  "ms_delay": 500,
  "html": "<div class='text'>Hello World</div>",
  "css": ".text { font-family: 'Roboto', sans-serif; }"
}

Start with ms_delay: 500 and increase if needed.

Common Issues

Font not appearing: Verify the font name matches exactly as shown on Google Fonts
Wrong font weight: Ensure you’re using a weight that exists for the chosen font
Incorrect quotes: Use single quotes in CSS: font-family: 'Roboto', sans-serif;

Live Example

This example loads both Montserrat and Roboto fonts:

Convert html to an image using custom fonts

{
  "google_fonts": "Montserrat|Roboto",
  "html": "<div class='text'>Hello World!</div>",
  "css": ".text { font-family: 'Montserrat'; }"
}

Alternative Approaches

If you need to use fonts not available on Google Fonts:

Use a different web font service by including their CSS in your HTML
Convert your font to base64 and include it directly in your CSS
Host the font files yourself and reference them via URL

Try it yourself

Need help?

Talk to a human. Please email us support@htmlcsstoimage.com with any questions and we’ll gladly help you get started.