Using custom Fonts and applying it globally across the application

More recently, I had the need to implement a custom font for my app, and also apply it globally to the entire app (Including fontFamily in every <Text> tag seemed such a chore. After overdosing on google, and stackoverflow(our common chum! for all things code), I found the cleanest way to do it. So, here goes: 

Step 1. Include the custom Font in your app.

Download the custom font. Note that it should have either the .ttf (TrueType font) or .otf (OpenType Font) extension. Both are supported by React Native.

What is the difference?

the OpenType font format (OTF) is the preferred choice for most professional designers because of its advanced typographic features and smaller file sizes. OTF files offer a much wider range of possibilities regarding type design. Plus, they provide better readability across multiple devices and platforms. They’re more modern-looking and offer a higher level of detail than TTF fonts.

However, for average users, who do not need additional features like ligatures, extra characters, or alternative characters, a TrueType font is perfectly fine. It will have the same basic characters. It just won’t have the advanced functionality of the OTF version.

Find more information here

1. Download the font zip file. Unzip it and extract the required ttf files to {your project}/src/assets/fonts. This is a suggested folder. You can save it wherever you like in the path of your project folder.

2. install expo-font, expo-app-loading and react-native-asset

3. run the following command from your terminal:

    npx react-native-asset

    This will link your font files to your project.

4. Next, in your app.js file,

import { useFonts } from 'expo-font';

...After all the code in js file, and just before return, add the following code.

    const [loaded] = useFonts({
        Playfulist: require("./assets/fonts/Playfulist.otf"),
    });

    if (!loaded) {
        return null;
    }

    return(...rest of your app.js code here...)

Needless to say, ensure the file spelling matches correctly. 
Now, you would be able to use your font like you normally do using styling with fontFamily: 'Playfulist'

Step 2. Arrange it so it will apply globally to all <Text> tags.

It is a pain to include the custom fontFamily to every Text element. To be able to apply the font globally to every Text element, do the following:

1. Create a Utilities folder in the project folder, and create a file called FontText.js in the folder. You can place this anywhere you like, just ensure you import it correctly.

import styles from "../src/styles";
import { Text } from "react-native";
const FontText = (props) => {
  return (
    <Text style={styles.alltext} {...props}>
      {props.children}
    </Text>
  );
};
export default FontText;

In your styles.js file, include the following styles:

alltext: {
    fontFamily: "Playfulist",
  },

Now, when rendering, (say in your app.js file), instead of using the <Text> tag, use the <FontText> tag.

import FontText from "./Utilities/FontText";

return (
    <View>
      <FontText>TEXT WITH CUSTOM FONT</FontText>
      <Text style={styles.alltext}>TEXT WITH CUSTOM FONT STYLING</Text>
      <Text>TEXT WITHOUT CUSTOM FONT</Text>
    </View>
)

Hope this helps!!


Comments

Post a Comment

Popular posts from this blog

Reading a pre-populated sqlite database using react native with expo..

Image
I recently needed to read an existing sqlite database, and return its contents to the react native front-end on an android emulator.  I  read several related posts on the subject but they all give examples of console logging, never returning.  I faced quite some difficulties, and hence decided to create this post as a blog. Hope it helps someone who comes here looking for a solution. Usually, there are two main issues that you would face. One, you would notice that simply opening a database and fetching won't work. You need to copy the local database to an internal document store and then use that database. Second, you would notice that there is no way of 'returning' the value of  a variable in the traditional sense of the term. You must handle it within the async function itself. So follow me for the solution.  Step 1. Create the root folder. From the terminal in the root folder, create the react native app with expo using : expo init newApp Choose the blank te...
Read more

React Hooks - useState Vs useRef (An explanation)

Image
I have tried to provide a brief  flowchart representation of how useState, useEffect and useRef work. The source for this explanation is from  WebDev Simplified's you tube channel . Suppose you wanted to show a name field and a count field to count how many times you updated the name field.  The diagram below shows the code (not focussing too much on the syntax and stuff), how one would normally do it, and the challenges/details of how react will work in each case. In general, on the left part of the diagram, I have provided the code, the middle part displays the contents of the form as things happen, and have included some explanation on how it all works on the right part.  Hoping the picture is self-explanatory.  The biggest usecase for useRef is to refer to the elements inside of the HTML. Each element inside the focument has a 'ref' attribute which can be set to anything. Most common use is to set focus to a certain element in the DOM. In the pictorial below...
Read more