<!DOCTYPE html>
<!--
 | In Cobalt, non-bold fonts are synthetically boldable if the desired weight is
 | bold.
 -->
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
      font-family: Roboto;
      font-size: 30px;
      font-weight: normal;
      color: #fff;
    }
    .containing-block {
      background-color: #03a9f4;
      width: 700px;
    }
    .roboto-normal {
      font-family: roboto-face;
      font-weight: normal;
    }
    .roboto-bold {
      font-family: roboto-face;
      font-weight: bold;
    }
    .noto-serif-normal {
      font-family: serif-face;
      font-weight: normal;
    }
    .noto-serif-bold {
      font-family: serif-face;
      font-weight: bold;
    }
    .dancing-script-normal {
      font-family: dancing-script-face;
      font-weight: normal;
    }
    .dancing-script-bold {
      font-family: dancing-script-face;
      font-weight: bold;
    }
    @font-face {
      font-family: roboto-face;
      src: local(Roboto-Regular);
    }
    @font-face {
      font-family: serif-face;
      src: local(NotoSerif);
    }
    @font-face {
      font-family: dancing-script-face;
      src: local(DancingScript);
    }
  </style>
</head>
<body>
  <div class="containing-block">
    <div class="roboto-normal">The Hegemony Consul</div>
    <div class="roboto-bold">The Hegemony Consul</div>
    <div class="noto-serif-normal">The Hegemony Consul</div>
    <div class="noto-serif-bold">The Hegemony Consul</div>
    <div class="dancing-script-normal">The Hegemony Consul</div>
    <div class="dancing-script-bold">The Hegemony Consul</div>
  </div>
</body>
</html>