title: Changing Polymer paper elements default font
body: <p>What is the best way to change Polymer Paper Elements default font from Roboto to a custom font? </p>
  
  <p>I used the <code>--paper-font-common-base: {}</code> mixin to define my font and this works in most places... but not all. In places like the <code>paper-toolbar</code> for example there is still Roboto applied. </p>
  
  <p>Is there another way to do this?</p>
  
  <p><em>EDIT</em></p>
  
  <p>I see the offender now. Inside <code>paper-styles/typography.html</code> there are loads of mixins that specifically define the font... eg</p>
  
  <pre><code>--paper-font-title: {
     /* @apply(--paper-font-common-base) */
    font-family: 'Roboto', 'Noto', sans-serif;
    -webkit-font-smoothing: antialiased;
    /* @apply(--paper-font-common-expensive-kerning); */
    text-rendering: optimizeLegibility;
    /* @apply(--paper-font-common-nowrap); */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
  };
  </code></pre>
  
  <p>Why are the <code>@apply</code> blocks here commented out? If these weren't commented by default it looks like this wouldn't be a problem. But now I have to go and override every mixin!</p>
  
  <p><em>EDIT 2</em></p>
  
  <p>I see there is a note at the top of the <code>typography.html</code> file</p>
  
  <pre><code>/*
  Unfortunately, we can't use nested rules
  See https://github.com/Polymer/polymer/issues/1399
  */
  </code></pre>
  
  <p>But this doesn't seem to be true, in Chrome anyway. If I uncomment the <code>@apply(--paper-font-common-base)</code> lines in all the mixins it seems to work. Is this a browser issue?</p>