External CSS, JavaScript & Fonts

Learn how to include external assets when generating images.

---

The API supports including any CSS file, JavaScript file or custom font. You can do this by including them in your HTML/CSS.

Be sure to use the full URL to the asset. We are unable to download relative URLs.

External JavaScript Example

To include JavaScript, you can load it in by using a normal script tag in your html. Replace src with the URL to your JavaScript file.

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

External CSS Example

For an external CSS file, add it to your HTML with the following. Replace href with the URL to your CSS file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Primer/10.8.1/build.css" />

External Font Example

You can load in a custom font using CSS.

@font-face {
  font-family: "CustomFont";
  src: url(https://url-to-your-font/FontNameRegular.ttc);
}
.box {
  font-family: "CustomFont"
}

Your font will need proper CORS headers set for this to work. To test it, visit CORS Tester and paste in your font link.

If it does not work, check that you have the following header set on your server.

access-control-allow-origin: *

---

Need help?

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

---