External CSS, JavaScript and 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.

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>

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" />

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: *