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

-

question:

in polymer 1.1 context, how include external font (like google font, or font-awesome) used dom-module?

i aware polymer favours using style-module. i'm aware technique preload font html , import dom-module. still can't work.

goal of <circle-x></circle-x> component:

my dom-module give circles these images <h1> below styled. under flexbox structure lay them out responsively according how many circles there are.

enter image description here

what tried (tldr version) used rel="import" font.html style-module <circle-x> components, can't use font style (it works when used sans-serif), means selector right. google-inspected , google-font stylesheet loaded in <circle-x> component page.

what tried (detail):

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

in polymer files, noticed there's file called roboto.html, made file similar that.

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

then there's typography.html 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 made own version of typography-x.html 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 own module, called circle-x.html, try use font, 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, want set default font other roberto sets of elements, , use css variable change them when need to. reading, have watched/ read lot of youtube videos, articles, , polymer site/documentation can't find solution.

i twitter @ebidel , said should use import , gave me link, felt did. https://github.com/polymerelements/font-roboto/blob/master/roboto.html

so there's 3 problems.

the first font not being loaded because has wrong rel. shouldn't rel="import" should rel="stylesheet"

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

the second you're creating mixin trying use regular custom property. read through guide again: https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details

you want do:

--circle-x-font-base: 'varela round'

instead of

--circle-x-font-base: {   font-family: 'varela round' }

but third problem way crazier , not fault. looks custom properties shim won't apply values string "var" in them.

--circle-x-font-base: varela round

will silently fail because has word "var" in it. try different font name doesn't contain word "var" , you'll see applied. opened github issue this: https://github.com/polymer/polymer/issues/2660


Comments

Post a Comment

Popular posts from this blog

matlab - error with cyclic autocorrelation function -

-
Image
i'm trying code cyclic autocorrelation function in matlab follows: t=0:(n-1); t=t*te; i_alpha=0; tau=-n2*te:te:n2*te; alpha=-1/2:1/n:1/2; ryy_cl=zeros(length(alpha),length(tau)); alpha=alpha/te ind_tau=0; i_alpha=i_alpha+1; k=tau ind_tau=ind_tau+1; if k>0 % ryy_cl(i_alpha,ind_tau)=1/length(sig_bin_syl_mod(1:end- k))*sum((sig_bin_syl_mod(1:end-k)).*sig_bin_syl_mod(k+1:end)).*exp(1i*2*pi*alpha*t(1+k:length(sig_bin_syl_mod(1:end)))); ryy_cl(i_alpha,ind_tau)=(1/n)*sum((sig_bin_syl_mod(1:end-k)).*sig_bin_syl_mod(k+1:end)).*exp(-1i*2*pi*alpha*t(1:end-k)); else ryy_cl(i_alpha,ind_tau)=(1/n)*sum((sig_bin_syl_mod(1-k:end)).*sig_bin_syl_mod(1:end+k)).*exp(-1i*2*pi*alpha*t(1-k:end)); end end end i'm getting errors, , doesn't show expecting. according below formulae, how can fix it? the code provided incomplete, difficult confidently reproduce error. in particular, haven't de...
Read more

django - (fields.E300) Field defines a relation with model 'AbstractEmailUser' which is either not installed, or is abstract -

-
i trying create customuser django project email username , add radio button truck , company. in registration process email-id registered per truck or company. mentioned radio button 'tag' , add manytomany field tag in emailuser model. when makemigrations, raising error : (fields.e300) field defines relation model 'abstractemailuser' either not installed, or abstract. i quite new django , not sure whether have created correct code wants. please me solving this. here code, models.py: import django django.contrib.auth.models import ( abstractbaseuser, baseusermanager, permissionsmixin) django.core.mail import send_mail django.db import models django.utils import timezone django.utils.translation import ugettext_lazy _ class emailusermanager(baseusermanager): """custom manager emailuser.""" def _create_user(self, email, password, is_staff, is_superuser, **extra_fields): """create , save emailus...
Read more

c# - What is a good .Net RefEdit control to use with ExcelDna? -

-
i using exceldna , c# build suite of tools. part of forms i'd want user select cells/ranges workbook. i've got application.inputbox route working...but doesn't cool... i haven't read many things excel's refedit control, , see many have in past written workarounds, in (shudder) vba or vb.net. however, none of these seem recent... best approach/control refedit functionality on form run via exceldna (if applicable)? the refedit sample project of github explores different ways of dealing threading when showing form excel add-in, main issue making refedit control .net add-in. check page links various other implementations: https://github.com/excel-dna/exceldna/wiki/links-about-refedit
Read more