Update system font stacks on error pages (vercel#157)

colepeters · nkzawa · commit c5bbff412bfe · 2016-10-30T15:07:18.000+09:00
* Enhance system font stack on _error.js

`-apple-system` = SF on Safari (macOS/iOS)
`BlinkMacSystemFont` = SF on Chrome (macOS)
`Roboto` for Android
`Segoe UI` for Windows
`Fira Sans` for Firefox OS
`Avenir` for pre-SF macOS
`Helvetica Neue, Lucida Grande` for older macOS

* Enhance system font stacks on _error-debug.js

Updates fonts to use better quality system fonts where commonly available
diff --git a/pages/_error-debug.js b/pages/_error-debug.js
@@ -40,14 +40,14 @@ const styles = {
   }),
 
   message: style({
-    fontFamily: 'menlo-regular',
+    fontFamily: '"SF Mono", "Roboto Mono", "Fira Mono", menlo-regular, monospace',
     fontSize: '10px',
     color: '#fff',
     margin: 0
   }),
 
   heading: style({
-    fontFamily: 'sans-serif',
+    fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
     fontSize: '13px',
     fontWeight: 'bold',
     color: '#ff90c6',
diff --git a/pages/_error.js b/pages/_error.js
@@ -31,7 +31,7 @@ const styles = {
     left: 0,
     right: 0,
     position: 'absolute',
-    fontFamily: '-apple-system, "SF UI Text", "Helvetica Neue", "Lucida Grande", sans-serif',
+    fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
     textAlign: 'center',
     paddingTop: '20%'
   }),
