How to use document / page level font scaling with Polymer 1.0 - polymer

Question

We are working to port out frontend pattern library from HTML / CSS into Polymer / Web Components.
In our existing codebase we have some page level rules for font scaling as such:
/**
* HTML
*/
html {
box-sizing: border-box;
font-size: 62.5%;
}
/**
* Body
*/
body {
-webkit-font-smoothing: antialiased;
font-family: "seravek-web";
font-size: 1.6rem;
line-height: 2.4rem;
}
#media only screen and (min-width: 1024px) {
body {
font-size: 1.8rem;
line-height: 2.6rem;
}
}
#media only screen and (min-width: 1360px) {
body {
font-size: 2rem;
line-height: 2.8rem;
}
}
Or another example for our display font mix-in (using the same method as paper-styles uses, but with media query)
--font-display1: {
/* #apply(--font-common-display) */
font-family: "nimbus-sans-condensed";
font-weight: bold;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
/* #apply(--font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
font-size: 8rem;
line-height: 7.2rem;
};
#media only screen and (min-width: 768px) {
--font-display1: {
/* #apply(--font-common-display) */
font-family: "nimbus-sans-condensed";
font-weight: bold;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
/* #apply(--font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
font-size: 12rem;
line-height: 10.8rem;
};
}
What would be the best way to keep this global font scaling and apply to our entire suite of components?
I understand that with the wicked benefits of encapsulation of web components comes the price of loss of the cascade of CSS and globally defined CSS selectors and rules.
I have been digging through the https://github.com/PolymerElements repos specifically https://github.com/PolymerElements/paper-styles to see Google does fonts and such across elements to no avail.

Answer 1

You're right to point out that isolation and cascading are mutually exclusive. In my previous projects we pierced isolation and created global styling information with build tools.
Everything global is handled at the build level. All other styling is handled with the encapsulation tools polymer provides.
So if you're using sass, for example, all your project's elements might leverage a global font variable. If you're using 3rd party components, you'd inject your font variable using the injection mechanisms polymer provides (like css data bags, or whatever they call them today).
Update:
Note that if you're using the shadow dom you might still be able to get milage out of the /deep/ * selector. IIRC this is deprecated - with no clear alternative yet.