HTML Spec - Text

Fonts and Font Resizing

Don't use SVG fonts. They are considerably slower than the alternatives on mobile devices and can potentially crash mobile safari.

Embed commonly used fonts in your app. On iOS, non-embedded fonts take time to load and may appear as blank text in your snapshots, creating unsightly flicker. Our Embedding Fonts has more information. Android has issues processing local font CSS which requires a workaround - see below.

Font-face Using font-face:local for embedded font on iOS, Android sees the local attribute and ignores the entire font-face. This makes it hard to embed fonts. The CSS must be rewritten on the fly, usually this is done by the app. Fonts can be read from the Android asset directory using a specially constructed file URLs: file:///android_asset/path/to/font. Replace the local attribute with a standard url attribute.

Set -webkit-text-size-adjust:100%; Without it, iPhones may attempt to scale text automatically, which will conflict with Pugpig's text sizing.

Font resizing works by increasing the font-size percentage on the body of your HTML document in specified increments.

By default the tool cycles through three font sizes - the size of the increments, and lower and upper sizes can be set in the native code - Font Resizing for iOS

In order to create text that resizes in Pugpig;

• Use REMs or EMs for copy that you want to resize - eg body copy
• Use pixels for copy that you don't want to resize - eg headlines

You can find out more about customising the font-resizing tools for iOS Font Resizing for iOS

If your page is having inconsistent behaviour with regards to font-sizing on iPhone – please see our Font sizing issues on iPhone article.