A number of fonts are available by default based on the platform (e.g., Roboto on Android, Helvetica on iOS). See the full list here.
A special font family, System
, is available that represents the system
font for the platform (San Francisco on iOS and Roboto on Android).
Other variants of the system font (e.g., San Francisco Display
Semibold) are not available via the System
font family, but can be
used by including them as custom fonts (see below).
Apple has two variants of the San Francisco font for use at different sizes:
San Francisco is the system font on iOS. There are two variants of this font: SF UI Text for text 19 points or smaller, and SF UI Display for text 20 points or larger.
React Native will not automatically use a different font variant based on the font size, but the right variant should be explicitly set when setting the font size.
Fonts are declared in CSS and can use units available in CSS (e.g.,
px
, pt
, em
). Units in CSS are, by default, related to the screen
density -- e.g., px
is similar to dp
on Android.
Font weights are defined by using CSS font weight units, such as "bold" and "bolder", or by using the font weight value directly, such as 800. These weights map directly to the weights defined by the font. If the weight specified is not available, the closest available weight is used instead.
Custom fonts can be used by adding a TTF or OTF font file to
package.json
. See this for more information.
While font download sizes can add up on the web, in native apps they are not as a significant of a part of the total download size. Keep in mind that multiple variants of a font can add up, as each variant (e.g., bold or italic) is a separate font file. Each file may be roughly 1% of the app's total size.