Changing Polymer paper elements default font - polymer

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