Skip to content

Instantly share code, notes, and snippets.

@parshap
Last active April 20, 2023 13:27
Show Gist options
  • Star 18 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save parshap/cf9cf0388d55a044004e5e78fa317b39 to your computer and use it in GitHub Desktop.
Save parshap/cf9cf0388d55a044004e5e78fa317b39 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.

@datvtwkm
Copy link

"Each file may be roughly 1% of the app's total size", it's just latin font, japanese and chinese fonts are heavy

@infinitbility
Copy link

we know our react-native default fonts are San Francisco for iOS and Roboto for android. but in this article, we discuss supported fonts by react-native and how to add custom fonts using the TTF file and you also get TTF files to link for fonts.

https://infinitbility.com/react-native-font-family-list

@JacksonLaw
Copy link

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

So how can we explicitly set the correct variant without loading custom fonts?

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