Open Site Navigation

Link Google fonts super fast in React Native

Since I started doing projects, personal and for clients, I've been using the traditional way to load custom fonts and use them in the project. The traditional way is to download the complete font package as a .zip file, export them and link each .ttf or .otf file. This is how I followed for linking google fonts too. But this is not the case when it comes to web development. A single line of @import or <link></link> would finish the job.


But when it comes to cross-platform mobile development, certain things like linking fonts, animations, etc. become a little bit tedious to do. As a programmer, we need to learn and adapt ourselves to new features and technologies. So, I came through a package called expo-google-fonts for expo projects. It is very easy to use and implement in the code.



Step 1 - Install it using the following command

expo install @expo-google-fonts/inter expo-font

the syntax is package_name/font_name



Step 2 - Import in your code using the following command


import {
  useFonts, //This is the function to load the fonts
  Inter_900Black, //The font with font weight
} from '@expo-google-fonts/inter';
  

Step 3 - Add the following line of code inside your default export function or class component

let [fontsLoaded] = useFonts({
  Inter_900Black,}); //You can load as many fonts and font variants as you wish


Here's a complete code for reference


import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import AppLoading from 'expo-app-loading';
import {
  useFonts,
  Inter_900Black,
} from '@expo-google-fonts/inter';

export default () => {
  let [fontsLoaded] = useFonts({
    Inter_900Black,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

        <Text style={{ fontFamily: 'Inter_900Black' }}>
          Inter Black
        </Text>

      </View>
    );
  }
};



Follow the documentation for a better understanding of the implementation.


You can follow this method to link google fonts easily in your react native projects.

 

A like would save my day, Thanks 😊


45 views0 comments