Issue uploading a custom font to a HTML5 in Google Web Designer

Question

I'm trying to build a HTML5 file in Google Web Designer and need to add a custom font into the file. I'm using @font-face code to import the custom font into the project, but it's not working. This is the code snippet I used:

@font-face {
      font-family: "Italian Plate No2-Black";
      src: url("assets/ItalianPlateNo2-Black.ttf") format("truetype");
    }

The file I'm trying to import is visible in the project, but is grayed out so I'm unsure if the code is able to use it at the current state.

I have tried using a different file format (.otf), but that didn't work either.

Would appreciate any help here!

Answer 1

Why don't you use HTML to use link custom fonts from Google Fonts and select which custom font you want to use and link it to HTML file and then give its Font properties in CSS

for example it should look something like this

 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200&family=Work+Sans:wght@300&display=swap" rel="stylesheet">

paste this in head section of HTML file

and in CSS file

body{
    font-family: 'League Spartan', sans-serif;`
}

paste this

you should be able to get the font family in google fonts itself