Link Search Menu Expand Document

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

Fonts and rendering speed

A large number of custom fonts can slow down initial render time. Only include the fonts you use.

Example

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

Image generated with HTML/CSS to Image and multiple fonts.

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.


Back to top

Built with extensive integration tests and serious care for developer happiness.
© 2018-2020 Code Happy, LLC.

Page last modified: Aug 7 2020 at 08:41 PM.

Edit this page on GitHub.