It would be really helpful to be able to define font stacks for Styles. Currently, if I want to use a custom font then the default sans-serif font loads first until my custom font loads and it looks terrible. If I were able to define a font stack, such as font-family: 'MyCustomFont', Open Sans, sans-serif; then I could have the initial font load be similar to my font and improve the experience significantly.
The specific use case I would like to use it for is to have the font be the system font of the user’s device, but this requires using a font stack to go through the options (e.g. font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;).
I have tried a work around to at least try and capture Apple system fonts and then having Roboto be the default for the rest by creating the following CSS files:
@font-face {
font-family: "system900";
font-style: normal;
font-weight: 900;
src:
local('SF Pro Display Black'),
local('SF-Pro-Display-Black'),
local('Roboto Black'),
local('Roboto-Black'),
url('//s3.amazonaws.com/appforest_uf/f1580751090604x737563055441100300/roboto-black-webfont.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('//s3.amazonaws.com/appforest_uf/f1580751084788x184938664275708930/roboto-black-webfont.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
But even on an apple device where SF Pro is downloaded, the “Flicker of Unstyled Text” still happens for roughly 1-2 seconds, so it’s not worth it.
