as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
Ring
AWS
Documentation
Support
Contact Us
My Cases
Get Started
Design and Develop
Publish
Reference
Support

expo-font

@amazon-devices/expo-font provides an interface to load fonts at runtime and use them in React Native components.

Installation

  1. Add the JavaScript library dependency in the package.json file.

    Copied to clipboard.

     dependencies: {
         ...
         "@amazon-devices/keplerscript-turbomodule-api": "~1.0.0",
         "@amazon-devices/expo-asset": "~2.0.1",
         "@amazon-devices/expo-constants": "~2.0.1",
         "@amazon-devices/expo-font": "~2.0.1",
         "expo": "~50.0.0",
         ...
     }
    
  2. Reinstall dependencies using the npm install command.

Examples

The example below demonstrates how to load fonts with the useFonts hook. You need to download the .otf file and replace the content inside the useFonts call.

Copied to clipboard.


import {useFonts} from '@amazon-devices/expo-font';
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

export const App = () => {
  const [fontsLoaded] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Text style={[styles.text, {fontFamily: 'Inter-Black'}]}>
        Inter Black
      </Text>
      <Text style={styles.text}>Platform Default</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  text: {
    fontSize: 30,
    color: 'black',
  },
});

API reference

See the documentation page for information about this library and API reference: Official Expo documentation for expo-font.

Hooks

Hook Description
useFonts Loads a map of fonts with loadAsync. Returns a boolean if the fonts are loaded and ready to use.

Methods

Method Description
isLoaded Synchronously detects if the font for fontFamily has finished loading
isLoading Synchronously detects if the font for fontFamily is still being loaded
loadAsync Highly efficient method for loading fonts from static or remote resources, which can then be used with the platform's native text elements
processFontFamily Transforms font family names to the scoped name. Doesn't need to be called in standalone or bare apps, but returns unscoped font family names if called in those contexts.
unloadAllAsync Unloads custom fonts. Used for testing.
unloadAsync Unloads custom fonts matching the fontFamilys and display values provided.

Add custom fonts

In addition to modifying the standard Vega fonts in your app, you can load your own custom fonts.

To load custom fonts, place your font file in the assets/fonts/ directory.

Your font file name must match the font family name. For example, if the font family name is Open Sans, your font file name should be Open Sans.ttf.

Supported versions

Package Version Based On @amazon-devices/react-native-kepler version
2.0.x 11.8.0 2.0.x

Supported Third-Party Libraries and Services.


Last updated: Sep 30, 2025