Как заставить CSS шрифта работать в пользовательском элементе ⇐ CSS

[Гость]

We are trying to make a Custom Element app with a custom font. We are using the @font-face property but when we check, the default font, Times New Roman, is displayed.

This is the part of the code that has the styling:

Код: Выделить всё

const template = document.createElement('template'); template.innerHTML = `                  @font-face {                 font-family: "Roboto";                 src:                 local("Roboto"),                 url("https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2");             }         *{             background-color: #658EA9;             padding: 10px;         }         #startBtn:not(:last-child), #stopBtn:not(:last-child), #downloadBtn:not(:last-child) {             margin-bottom: 5px;         }         #startBtn, #stopBtn, #downloadBtn {             margin-top: 10px;             width: 160px;             height: 45px;             cursor: pointer;             font-family: Roboto;         }         #startBtn:hover, #stopBtn:hover, #downloadBtn:hover{             background-color: #647C90;             color: red;         }         #status {             font-size: 20px;         }         #audioInputSelect {             width: 160px;             height: 45px;             cursor: pointer;             font-weight: bold;         }         div {             display: flex;             flex-direction: column;             justify-content: center;             align-items: center;         }                              START         STOP         SAVE         Not recording
      `; 

We tried moving the @font-face code to different parts of the code and adding quotes around the name in the button CSS. We were expecting the font to load on the button labels and other text.


Источник: https://stackoverflow.com/questions/781 ... om-element