Streamelements Custom Widget Template

widget.css

@import url('https://fonts.googleapis.com/css2?family={{font_name}}:ital,wght@{{font_weight}}&display=swap');

* {
    font-family: '{{font_name}}', cursive;
    color: {{font_color}} !important;
    font-size: {{font_size}}px !important;
    font-weight: {{font_weight}} !important;
    -webkit-text-stroke: {{font_border_size}}px {{font_border_color}};
}

widget.html

<!-- Font Awesome -->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> -->

<!-- Codo -->
<!-- <script src="https://raw.githack.com/Coocla33/codo.js/master/codo.min.js"></script>
<link rel="stylesheet" href="https://raw.githack.com/Coocla33/codo.js/master/codo.css"> -->

<!-- Main Container -->
<div class="main-container"></div>

widget.js

// On Event Received
window.addEventListener('onEventReceived', function(obj) {
	// Code
});

// On Session Update
window.addEventListener('onSessionUpdate', function(obj) {
	// Code
});

// On Widget Load
window.addEventListener('onWidgetLoad', function(obj) {
	// Code
});

widget.json

{
   "font_name": {
        "type": "googleFont",
        "label": "Font Name",
		"value": "Fredoka One",
        "group": "Font"
    },
    "font_color": {
    	"type": "color-picker",
      	"label": "Font Color",
      	"value": "#FFFFFF",
      	"group": "Font"
    },
    "font_size": {
    	"type": "number",
      	"label": "Font Size",
      	"value": 32,
      	"group": "Font"
    },
    "font_weight": {
    	"type": "dropdown",
      	"label": "Font Weight (Not All Font Weights Work!)",
      	"value": "0,400",
      	"options": {
        	"0,100": "100",
          	"1,100": "100 Italic",
          	"0,300": "300",
          	"1,300": "300 Italic",
          	"0,400": "400",
          	"1,400": "400 Italic",
          	"0,500": "500",
          	"1,500": "500 Italic",
          	"0,600": "600",
          	"1,600": "600 Italic",
          	"0,700": "700",
          	"1,700": "700 Italic",
          	"0,800": "800",
          	"1,800": "800 Italic",
          	"0,900": "900",
          	"1,900": "900 Italic"
        },
	"group": "Font"
    },
    "font_border_color": {
    	"type": "color-picker",
      	"label": "Font Border Color",
      	"value": "#000000",
      	"group": "Font"
    },
    "font_border_size": {
    	"type": "number",
      	"label": "Font Border Size (0 = none)",
      	"value": 1,
      	"group": "Font"
    }
}