Html template with Google Web Designer



It depends on what names you want to give your variables. You then need to call the variable “line1” in the client and not “f0”.


okay thanks


Here is a simple html template with animation made in Google Web Designer.


Has anybody tested what parameter may be different in browser and casparcg server?


I tested and found that
screen.colorDepth parameter for server 2.07, 2.1 and 2.2 are 0

And for chrome, inernet explorer and edge is 24

Can I use this property to distinguish between casparcg server and normal browser?


So this script helps to distinguish between casparcg and normal browser.

document.addEventListener("DOMContentLoaded", function(event) {
  if (screen.colorDepth == 0) {
    var ccg = document.querySelectorAll('[id^="ccg"]');
    var i;
    for (i = 0; i < ccg.length; i++) {
      document.getElementById(ccg[i].id).style.display = "none";

When we play below template in normal browser it shows all elements , and hide all elements in casparcg which have name prefix with ccg.


If you want to use own fonts, is that possible also, or is it only the standard google web fonts that works?


The font would need to be in Caspars font folder.


Yes We can use custom font in Google web Designer. See the examle here.

You need to put the font file in assets folder and define a font in code view like below

@font-face {
  font-family: "orange juice";
  src: url("assets/orange juice 2.0.ttf");

And then put the name of font family in font name in css pannel like below.