Search code examples
polymerpolymer-1.0web-componentgoogle-webfonts

How to get Google fonts (Varela Round) to work in Polymer 1.1 web component?

Question:

In polymer 1.1 context, how do I include an external font (like the google font, or font-awesome) to be used for my dom-module?

I am aware now polymer favours using style-module. I'm also aware the technique to preload the font to an html and import that to my dom-module. But I still can't get it to work.

Goal of my <circle-x></circle-x> component:

My dom-module basically give circles to these images with a <h1> below it already styled. Then under the flexbox structure to lay them out responsively according to how many circles there are.

enter image description here

What I tried (TLDR version) I used rel="import" a font.html to a style-module then to my <circle-x> components, but can't use the font for style (it works when I used sans-serif), which means I selector it right. I also google-inspected it and the google-font stylesheet is loaded in the <circle-x> component page.

What I tried (Detail):

<!-- File structure -->
+ circle-x.html
+ typography-x.html
+ varela-round.html
+ bower-components
+ - polymer
    - polymer.html
+ - webcomponentsjs   
    - webcomponents.js

In the Polymer files, I noticed there's a file called the roboto.html, so I made a file similar to that.

<!-- varela-round.html -->
<link rel="import" ref="https://fonts.googleapis.com/css?family=Varela+Round>

Then there's typography.html to reference roberto.html 

<!-- typography.html -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../font-roboto/roboto.html">

<style is="custom-style">

:root {
    --paper-font-common-base: {
      font-family: 'Roboto', 'Noto', sans-serif;
      -webkit-font-smoothing: antialiased;
    };
}

And I made my own version of typography-x.html for my Varela Round font:

<!-- typography-x.html -->
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="varela-round.html">
<style is="custom-style">
    :root {
        --circle-x-font-base: {
            font-family: 'Varela Round';
        };
    }
</style>

Now in my own module, called circle-x.html, I try to use the font, but with no luck.

<head>      
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>   
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="typography-x.html">
</head>    
<dom-module id="circle-x">
    <template>
        <style is="custom-style">

            .font{
                font-family: var(--circle-x-font-base, sans-serif);
                color: var(--circle-x-color, #353B39);
                font-size: var(--circle-x-font-size, 2rem);
                margin: 1rem auto 2rem;
            }

            .wrapper{
                display: flex;
                flex-wrap: wrap;
                width: 200px;
                margin: 20px;
                height: 250px;
            }
            .img{
                position: relative;
                width:200px;
                height:200px;
                border-radius: 50%;
                background-color: #E2E4E3;
                box-shadow: 2px 2px 2px gray;
            }
            .img img{
                width:100px;
                height:100px;
            }
            .img:hover{
                box-shadow: 5px 5px 5px gray;
                cursor: pointer;
            }
            .placeholder{
                position: absolute;
                right:50px;
                bottom:50px;
            }
        </style>
        <div class="wrapper">
            <a href="{{href}}" class="img">
                <img class="placeholder" src="{{img}}">
            </a>
            <h2 class="font">{{text}}</h2>
        </div>
    </template>
</dom-module>
<script>
    Polymer({
            is: "circle-x",
            properties:{
                img: {
                    type:String,
                    value:"http://www.placehold.it/100x100?text=IMG"
                },
                href: {
                    type:String,
                    value:"http://lightandlovehome.org"
                },
                text: {
                    type:String,
                    value: "test"
                }
            }
    });
</script>

Ultimately, I want to set a default font other than roberto for all my sets of elements, and use css variable to change them when I need to. Thanks for reading, I have watched/ read a lot of youtube videos, articles, and the polymer site/documentation but can't find a solution.

I Twitter @ebidel and he said I should use an import and gave me this link, but I felt I did. https://github.com/PolymerElements/font-roboto/blob/master/roboto.html

Solution

  • So there's three problems.

    The first is that your font is not being loaded because it has the wrong rel. It shouldn't be rel="import" it should be rel="stylesheet"

    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>

    The second is that you're creating a mixin but trying to use it like a regular custom property. Read through this guide again: https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details

    You want to do:

    --circle-x-font-base: 'Varela Round'

    instead of

    --circle-x-font-base: {
  font-family: 'Varela Round'
}

    But the third problem is way crazier and not your fault. It looks like the custom properties shim won't apply values with the string "var" in them.

    --circle-x-font-base: Varela Round

    will silently fail because it has the word "Var" in it. Try a different font name that doesn't contain the word "var" and you'll see that it is applied. I opened a GitHub issue for this: https://github.com/Polymer/polymer/issues/2660