react-native-fontify

Dynamically load fonts in React Native! Elevate your UI with on-the-fly typography.

Installation

npm install react-native-fontify

iOS

npx pod-install ios

Methods

import { hasFont, registerFontFromFile } from 'react-native-fontify';

hasFont()

Check if a font exists in the system.

const result = await hasFont('Poppins'); // Check if the Poppins font exists in the system.

registerFontFromFile()

Register a font file in the system.

import RNFS from 'react-native-fs'; // Use the `react-native-fs` library to download and access the system's cache directory.

const [updated, setUpdated] = useState(false);

// iOS
const postScriptName = await registerFontFromFile(
  RNFS.CachesDirectoryPath + '/Poppins.ttf'
); // Load the Poppins font from the cache directory. This returns the postscript name of the font.

// Android
const postScriptName = await registerFontFromFile(
  RNFS.CachesDirectoryPath + '/Poppins.ttf',
  'Poppins', //Specify family name to be registered
); // Load the Poppins font from the cache directory. This returns the postscript name of the font.

const result = await hasFont(postScriptName); // True
setUpdated(true); // Make sure to update the state after registration.

If the font has already been registered, it returns the postScriptName.

Don't forget to update all <Text /> or <TextInput /> components to apply the new font.

Error Code

Code	Description
ERR_FILE_NOT_FOUND	If the font has not been found on the given path
ERR_FONT_LOAD	Error while loading a font file
ERR_FONT_REGISTRATION_UNKNOWN	Unknown error (check errorMessage for description)
ERR_FONT_REGISTRATION	Error while registering the font in the system (check errorMessage for description)

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library