Using Google Fonts

Learn how to load in Google Fonts and use them in your images.

---

How it works

The API supports all Google Fonts. To use them, you must specify the fonts you would like loaded via the google_fonts parameter when creating your image.

• To load a single font, set the parameter to the font name: google_fonts=Roboto. And then set the font family in your CSS: font-family: 'Roboto';. On render, the API will load the font and use it for creating your image.

• Multiple fonts must be delimited by the | character: google_fonts=Open Sans|Roboto|Montserrat

Example

This image was rendered using multiple Google Fonts. Here was passed google_fonts=Montserrat|Roboto. And then referenced them in the CSS.

HTML

<div class="box">
  <h1>Hello world! 😎 /h1>
  <p>Just getting started with the HTML/CSS to Image <code>API</code>.</p>
</div>
<div class="box fancy-font gradient">
  <h1>Fancy font + Gradient + Emoji 😍</h1>
</div>

CSS

.box {
  width: 300px;
  border: 1px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: 'Roboto';
  background-color: #F1FFFF;
  height: 125px;
  text-align: center;
  padding: 20px;
  margin: 20px;
}

.gradient{
  background: linear-gradient(135deg, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
}

.fancy-font {
  font-family: 'Montserrat';
}

h1 {
  padding: 0px;
}

p {
  padding: 0px;
}

code {
  font-family: "Courier New";
  color: #d9534f;
}

body {
  background-color: #03B874;
}

Try it yourself

---

Using other web fonts

The API supports loading in any type of web font. You can do this by including your font in your HTML with a normal link tag. It will get loaded in at render like a normal webpage.

Handling flash of unstyled text (FOUT)

If you are seeing intermittent issues with your font rendering, it’s possible that the image is being rendered before the font has updated the text.

To fix this, you can use the ms_delay parameter to adjust how long the API lets the HTML render before creating the image. Start with a low value, such as 500 and increase from there until your image generates reliably.

---

Need help?

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

---