Use a font stack to make the text look better

The font stack has been borrowed from the recent font stack upgrade that
is being made to Wikipedia sites[1].

It looks a lot better that how it was before on the devices that have been
tested:

1. An Android phone
2. Firefox and Chrome on Ubuntu

This resolves an item in commons-app#28.

[1]: https://phabricator.wikimedia.org/T175877

Author: sivaraam

style.css

@@ -2,6 +2,24 @@
 
 body {
     text-align: center;
+
+    /**
+     * System font stack for sans-serif fonts
+     *
+     * `-apple-system`('San Francisco' font) – Support: Safari 9+ macOS and iOS, Firefox macOS
+     * `BlinkMacSystemFont` ('San Francisco' font) – Chrome 48+ macOS and iOS
+     * `Segoe UI` – Windows Vista & newer
+     * `Roboto` – Android 4.0
+     * `Lato` – Wikimedia Design choice, OFL licensed
+     * `Helvetica, Arial, sans-serif` – (Generic) Web fallback
+     *
+     * Note that CSS Fonts Module Level 4's `system-ui` value has resulted in
+     * unresolved side-effects in certain OS/language combinations as of
+     * now and is therefore not included.
+     *
+     * Ref: https://phabricator.wikimedia.org/T175877
+     */
+     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, Helvetica, Arial, sans-serif;
 }
 
 .bg-primary {