theming/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>bpmn-js Theming</title>

    <!-- viewer distro -->
    <script src="dist/custom-viewer.bundled.js"></script>

    <!-- needed for this example only -->
    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>

    <!-- example styles -->
    <style>
      html, body, #canvas {
        height: 100%;
        padding: 0;
        margin: 0;
        background-color: #333
      }
    </style>
  </head>
  <body>
    <div id="canvas"></div>

    <script>

      function appendStylesheet(url, done) {
        var stylesheet = document.createElement('link');

        stylesheet.href = url;
        stylesheet.rel = 'stylesheet';
        stylesheet.type = 'text/css';
        stylesheet.onload = done;

        document.getElementsByTagName('head')[0].appendChild(stylesheet);
      }

      var diagramUrl = 'https://raw.githubusercontent.com/bpmn-io/bpmn-js-examples/master/theming/resources/pizza-collaboration.bpmn';

      // viewer instance
      var bpmnViewer = new CustomBpmnJS({
        container: '#canvas',
        keyboard: {
          bindTo: document
        },
        bpmnRenderer: {
          defaultFillColor: '#333',
          defaultStrokeColor: '#fff'
        },
        textRenderer: {
          defaultStyle: {
            fontFamily: '"Nothing You Could Do"',
            fontWeight: 'bold',
            fontSize: 12,
            lineHeight: 16
          },
          externalStyle: {
            fontSize: 12,
            lineHeight: 16
          }
        }
      });


      /**
       * Open diagram in our viewer instance.
       *
       * @param {String} bpmnXML diagram to display
       */
      function openDiagram(bpmnXML) {

        // import diagram
        bpmnViewer.importXML(bpmnXML, function(err) {

          if (err) {
            return console.error('could not import BPMN 2.0 diagram', err);
          }

          // access viewer components
          var canvas = bpmnViewer.get('canvas');

          // zoom to fit full viewport
          canvas.zoom('fit-viewport');
        });
      }


      // (1) load external diagram file via AJAX
      $.get(diagramUrl, function(xml) {

        // (2) wait for font to load before rendering
        appendStylesheet('https://fonts.googleapis.com/css?family=Nothing+You+Could+Do', function() {

          // (3) open diagram
          openDiagram(xml);

        });

      }, 'text');
    </script>
  </body>
</html>