Changing Polymer paper elements default font

Question

What is the best way to change Polymer Paper Elements default font from Roboto to a custom font?

I used the --paper-font-common-base: {} mixin to define my font and this works in most places... but not all. In places like the paper-toolbar for example there is still Roboto applied.

Is there another way to do this?

EDIT

I see the offender now. Inside paper-styles/typography.html there are loads of mixins that specifically define the font... eg

--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;
};

Why are the @apply 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!

EDIT 2

I see there is a note at the top of the typography.html file

/*
Unfortunately, we can't use nested rules
See https://github.com/Polymer/polymer/issues/1399
*/

But this doesn't seem to be true, in Chrome anyway. If I uncomment the @apply(--paper-font-common-base) lines in all the mixins it seems to work. Is this a browser issue?

Answer 1

Overriding the --paper-font-common-base mixin is the correct approach.

The following CSS code should work.

:root {
    --paper-font-common-base: {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    };
}

I was unable to find the issue you pointed out, it probably was fixed already. When inspecting the following files, the --paper-font-common-base is being applied as expected.

https://github.com/PolymerElements/paper-styles/blob/master/typography.html https://github.com/PolymerElements/paper-toolbar/blob/master/paper-toolbar.html