Including CSS and JavaScript

Your templates can include JavaScript, CSS, and font assets by using <script>, <style>, or <link> elements within your template. You can include fonts from Google or elsewhere. JavaScript is executed as expected as your template is rendered with Google Chrome. You can even embed SVG elements directly into your templates as well to make visual icons easy!

For example consider the template below which utilizes are these techniques:

<div class="p-8 space-y-6 bg-gradient-to-b from-sky-700 to-sky-950 font-sans" style="width: 640px">
  <p class="text-center text-2xl text-gray-200 font-bold">
    This is Oliver Fluffington &mdash; he's a delightful little floof
  </span>
  <div>
    <img src="https://imagedelivery.net/77cF_qbJPexQSI5RB1efIA/4cae41d1-97fa-46fe-ea3f-89503cbefd00/public" class="object-cover rounded-[50%] mx-auto border-2 border-sky-800 h-64 w-48">
  </div>
  <div class="flex justify-center mx-auto">
    <span class="text-xl text-white inline-flex items-center gap-2 hightlight">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
      @cpt_oliver_fluffington
    </span>
  </div>
</div>
<!-- Include and embed CSS, JavaScript or Font assets -->
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = { theme: { fontFamily: { sans: ['Urbanist'] } } };
</script>
<style type="text/css">
  .hightlight {
    position: relative;
    z-index: 1;
  }
  .hightlight:before {
    background-color: #047857;
    content: "";
    position: absolute;
    height: 60%;
    left: -6px;
    right: -6px;
    bottom: 0;
    z-index: -1;
    transform: rotate(-2deg);
    border-radius: 8px;
  }
</style>

The above template would produce the following image:

Resulting image from the accompanying HTML and CSS which contains a short headline stating "This is Oliver Fluffington - he's a delightful little fluff", an image of an adorable puppy, and reference to an Instagram handle for @cpt_oliver_fluffington

TailwindCSS Play CDN

Including <script> assets is particularly useful when using the Play CDN from TailwindCSS as we can utilize TailwindCSS classes without worrying about building our assets.

Custom Fonts

With CSS, you have the ability to load custom fonts

<link rel="stylesheet" href="https://example.com/assets/fonts.css" />

Then within your CSS file, include your fonts as needed:

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Make sure you have the correct CORS headers on your asset servers. The fonts may need the following following header:

access-control-allow-origin: *