Skip to content

Android Custom Fonts

  • First we must rename our font files by using lowercase only and replacing - with _ for example:

    Quicksand-Bold.ttf -> quicksand_bold.ttf
    Quicksand-Light.ttf -> quicksand_light.ttf
    Quicksand-Medium.ttf -> quicksand_medium.ttf
    Quicksand-Regular.ttf -> quicksand_regular.ttf
    Quicksand-SemiBold.ttf -> quicksand_semibold.ttf
  • Copy renamed file to android/app/src/main/res/font

  • Create and .xml file and named it same as your font name for example quicksand.xml and put it in the same directory:

    <?xml version="1.0" encoding="utf-8"?>
    <font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="100" app:font="@font/quicksand_thin" />
    <font app:fontStyle="italic" app:fontWeight="100" app:font="@font/quicksand_thinitalic"/>
    <font app:fontStyle="normal" app:fontWeight="200" app:font="@font/quicksand_extralight" />
    <font app:fontStyle="italic" app:fontWeight="200" app:font="@font/quicksand_extralightitalic"/>
    <font app:fontStyle="normal" app:fontWeight="300" app:font="@font/quicksand_light" />
    <font app:fontStyle="italic" app:fontWeight="300" app:font="@font/quicksand_lightitalic"/>
    <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/quicksand_regular" />
    <font app:fontStyle="italic" app:fontWeight="400" app:font="@font/quicksand_italic"/>
    <font app:fontStyle="normal" app:fontWeight="500" app:font="@font/quicksand_medium" />
    <font app:fontStyle="italic" app:fontWeight="500" app:font="@font/quicksand_mediumitalic"/>
    <font app:fontStyle="normal" app:fontWeight="600" app:font="@font/quicksand_semibold" />
    <font app:fontStyle="italic" app:fontWeight="600" app:font="@font/quicksand_semibolditalic"/>
    <font app:fontStyle="normal" app:fontWeight="700" app:font="@font/quicksand_bold" />
    <font app:fontStyle="italic" app:fontWeight="700" app:font="@font/quicksand_bolditalic"/>
    <font app:fontStyle="normal" app:fontWeight="800" app:font="@font/quicksand_extrabold" />
    <font app:fontStyle="italic" app:fontWeight="800" app:font="@font/quicksand_extrabolditalic"/>
    <font app:fontStyle="normal" app:fontWeight="900" app:font="@font/quicksand_black" />
    <font app:fontStyle="italic" app:fontWeight="900" app:font="@font/quicksand_blackitalic"/>
    </font-family>
  • For newer Android versions v26:

    • Create android/app/src/main/res/font-v26.
    • Add only .xml file without font files for example quicksand.xml.
    • Use same example above and replace app: with android: for example:
    ---<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    +++<font-family xmlns:android="http://schemas.android.com/apk/res/android">
    ---<font app:fontStyle="normal" app:fontWeight="100" app:font="@font/quicksand_thin" />
    +++<font android:fontStyle="normal" android:fontWeight="100" android:font="@font/quicksand_thin" />
  • Register the font

    • For Java go to android/app/src/main/java/com/<yourAppName>/MainApplication.java
    // ---
    import com.facebook.react.views.text.ReactFontManager; // import this
    // ---
    public class MainApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
    super.onCreate();
    // add the following line after (super.onCreate)
    ReactFontManager.getInstance().addCustomFont(this, "Quicksand", R.font.quicksand);
    // ---
    • For Kotlin go to android/app/src/main/java/com/<yourAppName>/MainApplication.kt
    // ---
    import com.facebook.react.common.assets.ReactFontManager // import this
    // ---
    class MainApplication : Application(), ReactApplication {
    // ---
    override fun onCreate() {
    super.onCreate()
    // add the following line after (super.onCreate)
    ReactFontManager.getInstance().addCustomFont(this, "Quicksand", R.font.quicksand)
    // ---
  • Use the font:

    const style = createStyleSheet.create({
    text: {
    fontFamily: "Quicksand",
    },
    });
  • Rebuild and test.