expo-native-fonts v0.0.6
expo-native-fonts
Load fonts on iOS and Android using native code.
Traditionally, loading fonts in an Expo project requires using the expo-fonts
library. While this has historically been a great solution, it has to load the fonts at runtime which necessitates you to show the splash screen.
With expo-native-fonts
, font files are loaded via native code. What does that mean?
Fonts will be available immediately at runtime.
No more long splash screens!
You can change the font family, weight, and style individually.
No more
fontFamily: 'Raleway-BoldItalic'
!
Installation
Install the package:
yarn add expo-native-fonts
Add your font files to a directory (we recommend
assets/fonts
):app/ assets/ |- fonts/ |- Raleway-Black.ttf |- Raleway-BlackItalic.ttf |- ...
Add the plugin to your
app.json
config:{ "expo": { "plugins": [ [ "expo-native-fonts", { "Raleway": [ { "path": "./assets/fonts/Raleway-Black.ttf", "weight": 900 }, { "path": "./assets/fonts/Raleway-BlackItalic.ttf", "weight": 900, "style": "italic" } // ... ] } ] ] } }
Rebuild your app as described in the "Adding custom native code" guide
Start using the newly-defined font in your style objects:
const styles = StyleSheet.create({ text: { fontFamily: "Raleway", fontWeight: "900", fontStyle: "italic", }, });
Gotchas
Supported Font Files
This plugin has only been tested with .ttf
and .otf
files.
The use of other file types may not work!
Font Family Name
The key you use to define a family in the plugin config must exactly match the actual font family name defined in the font files.
To find the family name:
Install the
lcdf-typetools
package:brew install lcdf-typetools
Run the following on one of the font files:
otfinfo --family Raleway-Regular.ttf
The printed value is the family name to use.
For example, if the command printed
Matter
, you should format your config like so:{ "expo": { "plugins": [ [ "expo-native-fonts", { "Matter": [ // ... ] } ] ] } }
Contributing
Check out our Contributing guide for more information on reporting issues, submitting feedback, or contributing code.
Setup
To set up the repository locally on your machine, follow these steps:
Install the project dependencies:
yarn
Create a new build:
yarn build
Testing
To test that the project works, set up an example project app using create-expo-app
and follow these steps:
In this repo, link the project:
yarn link
In your example project repo, link the dependency:
yarn link expo-native-fonts
In your example project repo, run the prebuild command:
yarn expo prebuild --clean
Credits
Major props to @jsamr for their documentation on supporting fonts natively: https://github.com/jsamr/react-native-font-demo