Using System Fonts

Since the iPhone came out, Helvetica has pretty much been the standard font for all devices. It’s clean, simple and readable. However, both Apple and Google are tinkering with the default font to make it look even better on small screens. Here are the contenders:

helvetica

San Francisco

roboto

Starting with AppStudio 5.1.2, you have more control over these fonts, giving your apps a more native look.

Here’s how it works:

The fontfamily in Project Properties now defaults to ‘system’. That means the browser’s default, which is usually Helvetica on the desktop, San Francisco on iOS devices and Roboto on Android devices. Any new controls you add will have their font default to ‘inherit’, which means use the font in Project Properties. You can override if you want.

Existing projects (created before 5.1.2) will still have ‘Helvetica’ listed as the fontfamily in Project Properties, so this will not affect your current projects. However, you can change existing projects to use the system font by setting fontfamily in Project Properties to ‘system’ and the fontfamily of the individual controls to ‘inherit’.

While Safari has San Francisco built in on the desktop, Chrome Desktop does not have Roboto. If you want to use Roboto on the desktop, add this line to extraheaders in Project Properties:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">