How to make Font CSS work in Custom Element

Question

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 = `
    <style>
            @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;
        }
    </style>  
    <div>
        <select id="audioInputSelect"></select>
        <button id="startBtn">START</button>
        <button id="stopBtn">STOP</button>
        <button id="downloadBtn">SAVE</button>
        <p id="status">Not recording</p>
    </div>
`;

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.