HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FontFace add</title>
</head>
<body>
  <p id="sample">Sample text</p>
  <pre id="out">Loading font...</pre>
  <script>
    var face = new FontFace(
      "DemoFont",
      "url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2)"
    );
    face.load().then(function (loaded) {
      document.fonts.add(loaded);
      document.body.style.fontFamily = "DemoFont, system-ui, sans-serif";
      document.getElementById("out").textContent =
        "added: " + loaded.family + " " + loaded.status;
    }).catch(function (err) {
      document.getElementById("out").textContent =
        "Font failed (network/CORS may block): " + err;
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

FontFace + document.fonts.add (Try It)