6

I am working on a generic polymer 2.0 login page application, and I'm trying to use a custom font for a title bar.

In my login-page.html, I have this for the 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 header/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 like this:

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

This code turns the text red, but it doesn't apply the font. In contrary, it switches to Times new roman. I'm brand new to polymer, is there something I'm missing?

  • well, in my code i am doing it like: `@import url('https://fonts.googleapis.com/css?family=Montserrat:300,500,700');` but i am not good at this and I let others to answer. In your case you should propably follow this: http://stackoverflow.com/questions/7961721/how-do-i-install-a-custom-font-on-an-html-site – Kuba Šimonovský May 05 '17 at 15:02
  • @KubaŠimonovský I have followed that answer, but it hasn't worked.. I'll wait for more responses! –  May 05 '17 at 15:13

2 Answers2

3

You can use @font-face to import your font.

UPDATE:

You need to use an external document for the @font-face import and not place it in the custom element template. Some at-rules in the shadow root are ignored in Chrome, see discussion. While it's not an issue when using Polymer 1, Polymer 2 seems to follow the browser behavior in this respect.

I would suggest to have a css stylesheet with the @font-face import:

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

If you import that in your index.html, "font-regular" will be available globally. Alternatively, you can import the stylesheet only in your custom element.

vikdoro
  • 158
  • 1
  • 7
  • 1
    This doesn't seem to work for me, it just turns back into times new roman. Any ideas why? –  May 08 '17 at 10:10
  • Did you check if the font doesn't give a 404 in the console? Maybe your relative path is incorrect. – Ergo May 08 '17 at 15:54
  • Actually, my original suggestion doesn't seem to be working with Polymer 2 on Chrome. I'll update my answer. – vikdoro May 08 '17 at 19:23
  • I have checked that, and it does find the file. It keeps showing times now roman instead of my custom font.. I'll test with another font to see if it's not the .ttf file that's causing my problem –  May 13 '17 at 09:09
0

To import font to polymer use link href then apply the font example

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic" crossorigin="anonymous">

html, body {
 font-family:'Fira Sans', sans-serif;
}

you can also override --paper-font-common-base font

 html, body {
     font-family:'Fira Sans', sans-serif;
 --paper-font-common-base: {font-family:'Fira Sans', sans-serif;}
    }
Pro Ega
  • 11