How to use custom font in polymer

Question

I am working on a universal login page 2.0 application, and I am trying to use my own font for the header.

In my login-page.html, I have this for a custom style:

<custom-style>
    <style is="custom-style">
            body {
            margin: 0;
        }        
        app-toolbar {
            background-color: #4F1585;
            font-family: 'Roboto', Helvetica, sans-serif;
            color: white;
            --app-toolbar-font-size: 24px;
        }
        #maintitle{
            color: red;
            font-family: 'font-regular';
        }
    </style>
</custom-style>

And my title / toolbar:

<app-header fixed condenses effects="waterfall">
    <app-toolbar>
        <img src="../icons/app-icon.png" style="height:100%;"/>
        <div main-title id="maintitle">Login Page</div>
    </app-toolbar>
</app-header>

And I import the ttf file as follows:

<link rel="stylesheet" href="../fonts/font-regular.ttf" type="css">

This code turns the text into red, but the font is not applied. On the contrary, he switches to Times new roman. I'm brand new to polymer, is there something I am missing?

Answer 1

You can use @font-faceto import the font.

UPDATE:

@font-face, . at Chrome, . . Polymer 1, Polymer 2, , .

css @font-face:

@font-face {
    font-family: "font-regular";
    src: url("./font-regular.ttf") format("truetype");
}

index.html, "font-regular" . , .