Dynamically load fonts in React Native! Elevate your UI with on-the-fly typography.
npm install react-native-fontify
npx pod-install ios
import { hasFont, registerFontFromFile } from 'react-native-fontify';
Check if a font exists in the system.
const result = await hasFont('Poppins'); // Check if the Poppins font exists in the system.
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.
| 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) |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library