Updated April 19, 2023
Introduction to React Native Fonts
The following article provides an outline for React Native Fonts. Websites majorly depend on the information written over them. For making the information more attractive and user-friendly different font styles are used. These fonts make the website more interactive and readable. All of the major platforms, iOS and Android and the major desktop operating systems including Windows, Linux, MacOS have their own predefined set of fonts. Even though, one can personalize their own fonts in their websites or applications. We can use our personalized fonts for giving a unique touch to our applications.
Syntax:
Syntaxes to import different fonts in React Native.
Type 1:
import CustomFontsProvider
, {useCustomFont} from "react-native-custom-fonts";Type 2:
import { useFonts
, Inter_900Black } from '@expo-google-fonts/inter';Examples of React Native Fonts
Given below are the examples mentioned:
Example #1
In the below example, we have imported the different fonts using ‘expo-font’ to display the text.
We have styled the whole page using different react native styling components including SafeAreaView.
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert
The files used for proper execution of the code are:
App.js
import React from 'react';
import {
SafeAreaView
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert
} from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
export default props => {
let [fontsLoaded] = useFonts({
'Inter-Black': require('./1/Internal/Inter-Black.otf'),
});
if (!fontsLoaded) {
return <AppLoading />;
} else {
return (
<View style={{ flex: 1
, justifyContent: 'center'
, alignItems: 'center'
, backgroundColor: '#fffa6b' }}>
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/266416/pexels-photo-266416.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}}
style={{flex: 1}}
>
<Image
source={{
uri:
'https://pngimg.com/uploads/lotus_flower/lotus_flower_PNG58.png',
}}
style={{
height: 130
, marginTop: 10
, textAlign: 'center'
, width: 230
, justifyContent: 'center'
, alignItems: 'center'
}}
/>
<Text style={{ fontFamily: 'Inter-Black'
, fontSize: 40
, color: '#beed72'
, justifyContent: 'center'
, alignItems: 'center'
, textAlign: 'center' }}>EDUCBA</Text>
<Text style={{ fontSize: 40
, color: '#df57f7'
, justifyContent: 'center'
, alignItems: 'center'
, textAlign: 'center' }}>Training Provider</Text>
</ImageBackground>
</View>
);
}
};Output:
Example #2
In the below example, we have imported useFonts using ‘expo-font’ to display the fonts in our text.
We have styled the whole page using different react native styling components including SafeAreaView.
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert
With the help of these, we have used 2 background images to display the different custom text fonts upon them.
The files used for the proper execution of the code are:
App.js
import React
, { useState
, useEffect } from "react";
import {
SafeAreaView
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert
} from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
const photo = { uri: "https://images.pexels.com/photos/816608/pexels-photo-816608.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" };
const decoration = StyleSheet.create({
photo: {
justifyContent: "center",
backgroundColor: "#91001fa9",
height: 500,
},
styletext:{
textAlign: 'center',
color: '#d2ff70',
backgroundColor: '#706d5ca0',
},
docker: {
flexDirection: "column",
flex: 1,
padding: 20,
textAlign: 'center',
}
});
export default props => {
let [fontsLoaded] = useFonts({
'Inter-Black': require('./1/Internal/Inter-Black.otf'),
});
if (!fontsLoaded) {
return <AppLoading />;
} else {
return (
<>
<ImageBackground style={decoration.photo}
source={photo} >
<View style={decoration.docker}>
<Image
source={{
uri:
'http://pngimg.com/uploads/moon/moon_PNG35.png',
}}
style={{
height: 130,
marginTop: 10,
width: 150,
}}
/>
<Text style={{ fontFamily: 'Inter-Black'
, fontSize: 40
, color: '#beed72'
, justifyContent: 'center'
, alignItems: 'center'
, textAlign: 'center' }}>EDUCBA</Text>
<Text style={{ fontSize: 40
, color: '#df57f7'
, justifyContent: 'center'
, alignItems: 'center'
, textAlign: 'center' }}>
EDUCBA Loves You !
</Text>
<View style={{ flex: 1
, justifyContent: 'center'
, alignItems: 'center'
, backgroundColor: '#fffa6b'
, height: 330
, width: 340 }}>
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/136255/pexels-photo-136255.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}}
style={{flex: 1}}
>
<Image
source={{
uri:
'https://pngimg.com/uploads/wolf/wolf_PNG23190.png',
}}
style={{
height: 130
, marginTop: 10
, textAlign: 'center'
, width: 230
, justifyContent: 'center'
, alignItems: 'center'
}}
/>
<Text style={{ fontFamily: 'Inter-Black'
, fontSize: 40
, color: '#beed72'
, justifyContent: 'center'
, alignItems: 'center'
, textAlign: 'center' }}>EDUCBA</Text>
<Text style={{ fontSize: 40
, color: '#df57f7'
, justifyContent: 'center'
, alignItems: 'center'
, textAlign: 'center' }}>Training Provider</Text>
</ImageBackground>
</View>
</View>
</ImageBackground>
</>
);
}
};Output:
Example #3
In the below example, we have imported all fonts in the code using ‘expo-font’ to display the fonts in our text.
We have styled the whole page using different react native styling components including SafeAreaView.
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert
To provide the best user experience.
The files used for the proper execution of the code are:
App.js
import React from 'react';
import AppLoading from 'expo-app-loading';
import {
SafeAreaView
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert
} from 'react-native';
import * as Font from 'expo-font';
export default class App extends React.Component {
componentDidMount() {
this._loadFontsAsync();
}
async _loadFontsAsync() {
await Font.loadAsync(customFonts);
this.setState({ fontsLoaded: true });
}
state = {
fontsLoaded: false,
};
render() {
if (this.state.fontsLoaded) {
return (
<View style={{ flex: 1
, justifyContent: 'center'
, alignItems: 'center' }}>
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/2832039/pexels-photo-2832039.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}}
style={{flex: 1}}
>
<Image
source={{
uri:
'https://pngimg.com/uploads/tulip/tulip_PNG8994.png',
}}
style={{
height: 230
, marginTop: 10
, textAlign: 'center'
, width: 230
, justifyContent: 'center'
, alignItems: 'center'
}}
/>
<Text style={{ fontSize: 20
, color: '#f5eb69'
, justifyContent: 'center'
, alignItems: 'center'
, textAlign: 'center'
}}
>EDUCBA</Text>
<Text style={{ fontFamily: '1'
, fontSize: 20
, color: '#beed72'
, justifyContent: 'center'
, alignItems: 'center'
, textAlign: 'center'
}}>is the awesome</Text>
<Text style={{ fontFamily: '2'
, fontSize: 20
, color: '#7cfced'
, justifyContent: 'center'
, alignItems: 'center'
, textAlign: 'center' }}>Training Provider</Text>
</ImageBackground>
</View>
);
} else {
return <AppLoading />;
}
}
}
let customFonts = {
'1': require('./1/Internal/Inter-Black.otf'),
'2': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
};Output:
Conclusion
We saw its implementation and improvisation according to the requirement of our application. Different examples are explained in the article for a better understanding of the topic.
Recommended Articles
This is a guide to React Native Fonts. Here we discuss the introduction and syntax of React Native Fonts along with examples respectively. You may also have a look at the following articles to learn more –
