Skip to main content

​
Overview

The Fonts constant provides platform-specific font families that adapt automatically based on the runtime environment. It uses React Native’s Platform.select() to deliver optimized font stacks for iOS, Android, and Web platforms.

​
Import

import { Fonts } from '@/constants/theme';

​
Font Families

​
iOS Fonts

On iOS, the fonts map to native UIFontDescriptor system designs:
​
sans
string
default:"system-ui"
iOS UIFontDescriptorSystemDesignDefault - Default system font
​
serif
string
default:"ui-serif"
iOS UIFontDescriptorSystemDesignSerif - Serif system font
​
rounded
string
default:"ui-rounded"
iOS UIFontDescriptorSystemDesignRounded - Rounded system font (SF Pro Rounded)
​
mono
string
default:"ui-monospace"
iOS UIFontDescriptorSystemDesignMonospaced - Monospaced system font

​
Android/Default Fonts

On Android and other platforms, fonts use standard CSS font family values:
​
sans
string
default:"normal"
Default sans-serif font
​
serif
string
default:"serif"
Default serif font
​
rounded
string
default:"normal"
Falls back to default font (no native rounded font on Android)
​
mono
string
default:"monospace"
Default monospaced font

​
Web Fonts

On web platforms, fonts use comprehensive fallback stacks:
​
sans
string
System font stack for sans-serif text
​
serif
string
default:"Georgia, 'Times New Roman', serif"
Classic serif font stack
​
rounded
string
Rounded font stack with Japanese font support
​
mono
string
Developer-friendly monospace font stack

​
Usage Examples

​
Basic Usage

Use fonts in your StyleSheet definitions: 
import { StyleSheet, Text } from 'react-native';
import { Fonts } from '@/constants/theme';

const styles = StyleSheet.create({
  title: {
    fontFamily: Fonts.sans,
    fontSize: 24,
    fontWeight: 'bold',
  },
  code: {
    fontFamily: Fonts.mono,
    fontSize: 14,
    backgroundColor: '#f5f5f5',
    padding: 4,
  },
  subtitle: {
    fontFamily: Fonts.serif,
    fontSize: 18,
    fontStyle: 'italic',
  },
});

function MyComponent() {
  return (
    <>
      <Text style={styles.title}>Welcome to NearYou</Text>
      <Text style={styles.subtitle}>Discover what's around you</Text>
      <Text style={styles.code}>const greeting = "Hello World";</Text>
    </>
  );
}

​
Inline Styles

import { Text } from 'react-native';
import { Fonts } from '@/constants/theme';

function InlineExample() {
  return (
    <Text style={{ fontFamily: Fonts.rounded, fontSize: 16 }}>
      This text uses the rounded font family
    </Text>
  );
}

​
Platform-Specific Styling

Combine with Platform-specific styles for fine-grained control: 
import { Platform, StyleSheet, Text } from 'react-native';
import { Fonts } from '@/constants/theme';

const styles = StyleSheet.create({
  heading: {
    fontFamily: Fonts.sans,
    fontSize: Platform.select({
      ios: 28,
      android: 26,
      web: 32,
    }),
    fontWeight: Platform.select({
      ios: '700',
      android: 'bold',
      web: '600',
    }),
  },
});

​
Typography System

Create a reusable typography system: 
import { TextStyle } from 'react-native';
import { Fonts } from '@/constants/theme';

const typography = {
  h1: {
    fontFamily: Fonts.sans,
    fontSize: 32,
    fontWeight: 'bold',
    lineHeight: 40,
  } as TextStyle,
  h2: {
    fontFamily: Fonts.sans,
    fontSize: 24,
    fontWeight: '600',
    lineHeight: 32,
  } as TextStyle,
  body: {
    fontFamily: Fonts.sans,
    fontSize: 16,
    lineHeight: 24,
  } as TextStyle,
  code: {
    fontFamily: Fonts.mono,
    fontSize: 14,
    lineHeight: 20,
  } as TextStyle,
};

export default typography;

​
Type Definition

import { Platform } from 'react-native';

export const Fonts: {
  sans: string;
  serif: string;
  rounded: string;
  mono: string;
};
The actual value of Fonts is determined at runtime based on the platform using Platform.select().

​
Best Practices

Use Consistent Font Families

Stick to the four provided font families (sans, serif, rounded, mono) throughout your app for visual consistency.

Test Across Platforms

Font rendering can vary significantly between iOS, Android, and Web. Always test your text styles on all target platforms.

Combine with Font Weights

Use fontWeight in combination with font families for proper typographic hierarchy.

Consider Accessibility

Ensure your font sizes and line heights maintain readability. Minimum recommended font size is 14px for body text.

​
Platform Notes

​
iOS

  • Uses native SF Pro font family
  • rounded provides the beautiful SF Pro Rounded
  • All system fonts support Dynamic Type

​
Android

  • Uses Roboto as the default system font
  • rounded falls back to normal since Android doesn’t have a native rounded font
  • Consider using custom fonts if you need rounded typography on Android

​
Web

  • Provides comprehensive fallback stacks
  • System fonts load instantly without font file downloads
  • Ensures consistent rendering across browsers

Build docs developers (and LLMs) love

Get started for freeTalk to us