https://github.com/kylerjensen/react-native-font-faces
Easily emulate font-face behavior in react-native
https://github.com/kylerjensen/react-native-font-faces
custom-fonts expo font-face font-style font-weight fonts react-native react-native-web
Last synced: about 1 year ago
JSON representation
Easily emulate font-face behavior in react-native
- Host: GitHub
- URL: https://github.com/kylerjensen/react-native-font-faces
- Owner: kylerjensen
- License: mit
- Created: 2020-07-10T05:30:06.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T12:32:42.000Z (about 3 years ago)
- Last Synced: 2025-03-23T18:50:00.085Z (over 1 year ago)
- Topics: custom-fonts, expo, font-face, font-style, font-weight, fonts, react-native, react-native-web
- Language: TypeScript
- Homepage:
- Size: 2.06 MB
- Stars: 16
- Watchers: 2
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Native Font Faces
Easily emulate @font-face behavior in react-native.
## Motivation:
Using custom fonts in React Native becomes complicated when trying to work with different font weights and styles. Even though the React Native `TextStyle` type includes properties for `fontFamily`, `fontWeight` and `fontStyle`, these properties seem to work only for the default built-in fonts, and have limited support when using custom fonts. For this reason, selecting a specific font weight and style is traditionally achieved by specifying the exact PostScript name of the desired loaded font file.
For example:
```jsx
const style: ViewStyle = {
fontFamily: 'Roboto-MediumItalic',
};
```
This makes it difficult to achieve merged styles or text style composition. A preferable solution might be something like this:
```jsx
const style: ViewStyle = {
fontFamily: 'Roboto',
fontWeight: '500',
fontStyle: 'italic',
};
```
This library aims to make life easier by allowing React Native developers to use `fontWeight` and `fontStyle` with custom fonts on iOS, Android, and Web.
## Getting Started
1. Add the required dependencies to your application's `package.json`:
```shell
yarn add react-native-font-faces
```
If you are using Expo and need to load additional custom font files into your app, also add the following:
```shell
yarn add expo-font
```
2. Add a call to `enableFontFaces()` in your application's entry point, and import the desired font faces. Then just use the font family as you would normally expect:
```jsx
// App.tsx
import React from 'react';
import { useFonts } from 'expo-font';
import { AppLoading } from 'expo';
import { AppContent } from './AppContent';
import { Roboto_All, enableFontFaces, getExpoFontMap } from 'react-native-font-faces';
enableFontFaces(Roboto_All);
export default function App() {
const [loaded, error] = useFonts(getExpoFontMap(Roboto_All));
if (!loaded) {
return ;
} else if (error) {
return {error.message};
} else {
return (
This should be Regular
This should be Italic
This should be Bold
This should be BoldItalic
This should be Thin
This should be ThinItalic
);
}
}
const styles = StyleSheet.create({
text: {
fontFamily: 'Roboto',
},
bold: {
fontWeight: 'bold',
},
thin: {
fontWeight: '100',
},
italic: {
fontStyle: 'italic',
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
```
## Migrating from 3.x
In version 4.x, we removed `FontFacesProvider` and added `enableFontFaces`. Follow these steps to migrate:
1. Remove all instances of ``.
2. Add a call to `enableFontFaces()` in your application's entrypoint.
3. (Optional) Add a call to `useFonts()` (expo-font) or `loadFonts()` (react-native-dynamic-fonts) to dynamically load remote fonts.
## Migrating from 2.x
In version 3.x, we simplified `FontFacesProvider` and removed `useFontFaces`. Follow these steps to migrate:
1. Remove all instances of `useFontFaces()`.
2. Update your application's `` to provide the `onLoading` and `onError` props (optional).
## Migrating from 1.x
In version 2.x, we introduced `FontFacesProvider` and `useFontFaces`, and removed `enableFontFaces`. Follow these steps to migrate:
1. Remove all instances of `enableFontFaces()`.
2. Add a `` around your application's root component.
3. Add `const [fontsLoaded] = useFontFaces(...)` inside an inner function component's body and handle the `fontsLoaded` value appropriately.