Default to native system fonts

framer/Extras/ErrorDisplay.coffee

@@ -16,7 +16,7 @@ if Utils.isMobile()
 else
 	Config.height = 40
 	Config.textInset = 12
-	Config.fontSize = 14
+	Config.fontSize = 13
 
 
 class ErrorDisplay extends BaseClass
@@ -56,8 +56,8 @@ class ErrorDisplay extends BaseClass
 				clip: true
 
 			error.text.style =
-				font: "#{Config.fontSize}px/1em Helvetica"
-				lineHeight: "#{parseInt(error.text.height * 0.95)}px"
+				font: "#{Config.fontSize}px/1em #{Utils.deviceFont()}"
+				lineHeight: "#{error.text.height}px"
 				textAlign: "center"
 				wordWrap: "break-word"
 				textOverflow: "ellipsis"
@@ -81,13 +81,18 @@ class ErrorDisplay extends BaseClass
 
 		error = @createLayer()
 		error.scale = 1.1
-		error.animate
+		error.text.html = message
+
+		animation = error.animate
 			properties:
 				scale: 1
-			curve: "spring(800, 60, 10)"
+			curve: "spring(800, 55, 10)"
+
+		# Terrible hacky fix for blurred text bug on Chrome desktop
+		if Utils.isChrome() and Utils.isDesktop()
+			animation.onAnimationEnd ->
+				Utils.delay 0, -> error.text.html = message + " "
 
-		error.text.html = message
-
 	destroy: ->
 		@_context?.destroy()
 

framer/Utils.coffee

@@ -292,10 +292,22 @@ Utils.webkitVersion = ->
 	version
 
 Utils.isChrome = ->
-	return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)
+	return /Chrome/.test(navigator.userAgent) and /Google Inc/.test(navigator.vendor)
 
 Utils.isSafari = ->
-	return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)
+	return /Safari/.test(navigator.userAgent) and /Apple Computer/.test(navigator.vendor)
+
+Utils.isAndroid = ->
+	return /(android)/i.test(navigator.userAgent)
+
+Utils.isIOS = ->
+	return /(iPhone|iPod|iPad)/i.test(navigator.platform)
+
+Utils.isMacOS = ->
+	return /Mac/.test(navigator.platform)
+
+Utils.isWindows = ->
+	return /Win/.test(navigator.platform)
 
 Utils.isTouch = ->
 	window.ontouchstart is null and
@@ -376,6 +388,22 @@ Utils.deviceType = ->
 Utils.pathJoin = ->
 	Utils.arrayFromArguments(arguments).join("/")
 
+Utils.deviceFont = (os) ->
+
+	# https://github.com/jonathantneal/system-font-css
+
+	if not os
+		os = "macos" if Utils.isMacOS()
+		os = "ios" if Utils.isIOS()
+		os = "android" if Utils.isAndroid()
+		os = "windows" if Utils.isWindows()
+
+	return "-apple-system, SF UI Text, Helvetica Neue" if os is "macos"
+	return "-apple-system, SF UI Text, Helvetica Neue" if os is "ios"
+	return "Roboto, Helvetica Neue" if os is "android"
+	return "Segoe UI" if os is "windows"
+	return "Helvetica"
+
 ######################################################
 # MATH FUNCTIONS