Custom Element Font

Ask the community
1

We are trying to use a custom font in the captureBtn, but the font doesn’t load properly. Below is the style code, without any font data. The font URL is https://static.wixstatic.com/ufonts/7bf939_caaac888da794ba396e1d19a84c05791/woff2/file.woff2 but it doesn’t load. Any help would be appreciated.

const template = document.createElement('template');

template.innerHTML = `
   <style>
      *{
         background-color: #658EA9;
      }
      #videoCam {
         width: 630px;
         height: 300px;
         margin-left: 0px;
         border: 3px solid #ccc;
         background: black;
      }
      #captureBtn {
         margin-top: 10px;
         width: 120px;
         height: 45px;
         cursor: pointer;
         font-weight: bold;
      }
      #captureBtn:hover{
         background-color: #647C90;
         color: red;
      }
      .video-container {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
   </style>  
<div>
   <br/><br/>
   <div class="video-container">
      <video id="videoCam"></video>
      <button id="captureBtn">Capture</button>
   </div>
   <canvas id="canvas" style="display: none;"></canvas>
   <br/><br/>
</div>
`;
2

This is more of a general CSS question rather than being specific to the Wix/Velo platform.

Try including the font and then specifying it in the CSS. That should work. CSS Google Fonts