Skip to content

Instantly share code, notes, and snippets.

@adriancbo
Forked from parshap/react-native-fonts.md
Created July 12, 2021 08:17
Show Gist options
  • Save adriancbo/144e02093aa924da785c3bfdf6d69d55 to your computer and use it in GitHub Desktop.
Save adriancbo/144e02093aa924da785c3bfdf6d69d55 to your computer and use it in GitHub Desktop.
Fonts in React Native

Fonts in React Native

Default Fonts

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.

"System" Font

A special font family, System, is available that represents the system font for the platform (San Francisco on iOS and Roboto on Android).

"System" Font Variants

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).

Changing Font by Size

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.

iOS Human Interface Guidelines > Typography

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.

Font Size Units

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 Weight

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

Custom fonts can be used by adding a TTF or OTF font file to package.json. See this for more information.

Impact on App Size

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment