{"id":17089024,"url":"https://github.com/jsamr/react-native-font-demo","last_synced_at":"2025-05-12T17:23:58.222Z","repository":{"id":44381816,"uuid":"435508855","full_name":"jsamr/react-native-font-demo","owner":"jsamr","description":"A demo for Android font typeface support in React Native!","archived":false,"fork":false,"pushed_at":"2024-02-01T09:41:19.000Z","size":2215,"stargazers_count":176,"open_issues_count":3,"forks_count":13,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-12T17:23:45.483Z","etag":null,"topics":["android","font","fonts","react-native","typeface"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsamr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-06T13:32:46.000Z","updated_at":"2025-05-07T06:39:17.000Z","dependencies_parsed_at":"2024-11-07T16:11:25.195Z","dependency_job_id":null,"html_url":"https://github.com/jsamr/react-native-font-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsamr%2Freact-native-font-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsamr%2Freact-native-font-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsamr%2Freact-native-font-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsamr%2Freact-native-font-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsamr","download_url":"https://codeload.github.com/jsamr/react-native-font-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253785281,"owners_count":21963943,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","font","fonts","react-native","typeface"],"created_at":"2024-10-14T13:44:48.659Z","updated_at":"2025-05-12T17:23:58.186Z","avatar_url":"https://github.com/jsamr.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A Step-by-step Guide to a Consistent Multi-Platform Font Typeface Experience in React Native\n\n## Goal\n\nBe able to use font typeface modifiers such as `fontWeight` and `fontStyle` in combination with a custom font family, in both iOS and Android.\n\n```jsx\n\u003cText style={{\n  fontFamily: \"Raleway\",\n  fontWeight: \"100\",\n  style: \"italic\"\n}}\u003e\n  Hello world!\n\u003c/Text\u003e\n\u003cText style={{\n  fontFamily: \"Raleway\",\n  fontWeight: \"bold\",\n  style: \"normal\"\n}}\u003e\n  Hello world!\n\u003c/Text\u003e\n```\n\nFor this example, we are going to register the _Raleway_ font family. Of course, this method will work with any TTF font.\n\n### Prerequisites\n\n#### Assets\n\nYou need the [whole Raleway font family](https://fonts.google.com/share?selection.family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900), extracted in a temporary folder. That is:\n\n- `Raleway-Thin.ttf` (100)\n- `Raleway-ThinItalic.ttf`\n- `Raleway-ExtraLight.ttf` (200)\n- `Raleway-ExtraLightItalic.ttf`\n- `Raleway-Light.ttf` (300)\n- `Raleway-LightItalic.ttf`\n- `Raleway-Regular.ttf` (400)\n- `Raleway-Italic.ttf`\n- `Raleway-Medium.ttf` (500)\n- `Raleway-MediumItalic.ttf`\n- `Raleway-SemiBold.ttf` (600)\n- `Raleway-SemiBoldItalic.ttf`\n- `Raleway-Bold.ttf` (700)\n- `Raleway-BoldItalic.ttf`\n- `Raleway-ExtraBold.ttf` (800)\n- `Raleway-ExtraBoldItalic.ttf`\n- `Raleway-Black.ttf` (900)\n- `Raleway-BlackItalic.ttf`\n\nWe will assume those files are now stored in `/tmp/raleway/`.\n\n#### Find the font family name\n\n\u003e You will need **otfinfo** installed in your system to perform this step.\n\u003e It is shipped with many Linux distributions. On MacOS, install it via\n\u003e **lcdf-typetools** brew package.\n\n```sh\notfinfo --family Raleway-Regular.ttf\n```\n\nShould print \"Raleway\". This value must be retained for the Android setup.\nThis name will be used in React `fontFamily` style.\n\n#### Setup\n\n```sh\nreact-native init FontDemo\ncd FontDemo\n```\n\n#### Android\n\nFor Android, we are going to use [XML Fonts](https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml) to define variants of a base font family.\n\n\u003e **Remark**: This procedure is available in React Native since commit [fd6386a07eb75a8ec16b1384a3e5827dea520b64](https://github.com/facebook/react-native/commit/fd6386a07eb75a8ec16b1384a3e5827dea520b64) (7 May 2019 ), with the addition of `ReactFontManager::addCustomFont` method.\n\n##### 1. Copy and rename assets to the resource font folder\n\n```sh\nmkdir android/app/src/main/res/font\ncp /tmp/raleway/*.ttf android/app/src/main/res/font\n```\n\nWe must rename the font files following these rules to comply with Android asset names restrictions:\n\n- Replace `-` with `_`;\n- Replace any uppercase letter with its lowercase counterpart.\n\nYou can use the below bash script (make sure you give the font folder as first argument):\n\n```bash\n#!/bin/bash\n# fixfonts.sh\n\ntypeset folder=\"$1\"\nif [[ -d \"$folder\" \u0026\u0026 ! -z \"$folder\" ]]; then\n  pushd \"$folder\";\n  for file in *.ttf; do\n    typeset normalized=\"${file//-/_}\";\n    normalized=\"${normalized,,}\";\n    mv \"$file\" \"$normalized\"\n  done\n  popd\nfi\n```\n\n```sh\n./fixfonts.sh /path/to/root/FontDemo/android/app/src/main/res/font\n```\n\n##### 2. Create the definition file\n\nCreate the `android/app/src/main/res/font/raleway.xml` file with the below content. Basically,\nwe must create one entry per `fontStyle` / `fontWeight` combination we wish to support, and\nregister the corresponding asset name.\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cfont-family xmlns:app=\"http://schemas.android.com/apk/res-auto\"\u003e\n    \u003cfont app:fontStyle=\"normal\" app:fontWeight=\"100\" app:font=\"@font/raleway_thin\" /\u003e\n    \u003cfont app:fontStyle=\"italic\" app:fontWeight=\"100\" app:font=\"@font/raleway_thinitalic\"/\u003e\n    \u003cfont app:fontStyle=\"normal\" app:fontWeight=\"200\" app:font=\"@font/raleway_extralight\" /\u003e\n    \u003cfont app:fontStyle=\"italic\" app:fontWeight=\"200\" app:font=\"@font/raleway_extralightitalic\"/\u003e\n    \u003cfont app:fontStyle=\"normal\" app:fontWeight=\"300\" app:font=\"@font/raleway_light\" /\u003e\n    \u003cfont app:fontStyle=\"italic\" app:fontWeight=\"300\" app:font=\"@font/raleway_lightitalic\"/\u003e\n    \u003cfont app:fontStyle=\"normal\" app:fontWeight=\"400\" app:font=\"@font/raleway_regular\" /\u003e\n    \u003cfont app:fontStyle=\"italic\" app:fontWeight=\"400\" app:font=\"@font/raleway_italic\"/\u003e\n    \u003cfont app:fontStyle=\"normal\" app:fontWeight=\"500\" app:font=\"@font/raleway_medium\" /\u003e\n    \u003cfont app:fontStyle=\"italic\" app:fontWeight=\"500\" app:font=\"@font/raleway_mediumitalic\"/\u003e\n    \u003cfont app:fontStyle=\"normal\" app:fontWeight=\"600\" app:font=\"@font/raleway_semibold\" /\u003e\n    \u003cfont app:fontStyle=\"italic\" app:fontWeight=\"600\" app:font=\"@font/raleway_semibolditalic\"/\u003e\n    \u003cfont app:fontStyle=\"normal\" app:fontWeight=\"700\" app:font=\"@font/raleway_bold\" /\u003e\n    \u003cfont app:fontStyle=\"italic\" app:fontWeight=\"700\" app:font=\"@font/raleway_bolditalic\"/\u003e\n    \u003cfont app:fontStyle=\"normal\" app:fontWeight=\"800\" app:font=\"@font/raleway_extrabold\" /\u003e\n    \u003cfont app:fontStyle=\"italic\" app:fontWeight=\"800\" app:font=\"@font/raleway_extrabolditalic\"/\u003e\n    \u003cfont app:fontStyle=\"normal\" app:fontWeight=\"900\" app:font=\"@font/raleway_black\" /\u003e\n    \u003cfont app:fontStyle=\"italic\" app:fontWeight=\"900\" app:font=\"@font/raleway_blackitalic\"/\u003e\n\u003c/font-family\u003e\n```\n\n##### 3. Register the new font\n\nIn `android/app/src/main/java/com/fontdemo/MainApplication.java`, bind the font family name with the asset we just created inside `onCreate` method.\n\n\u003e :warning: If you are registering a different font, make sure you replace \"Raleway\" with the name found in the former step (find font family name).\n\n```diff\n--- a/android/app/src/main/java/com/fontdemo/MainApplication.java\n+++ b/android/app/src/main/java/com/fontdemo/MainApplication.java\n@@ -7,6 +7,7 @@ import com.facebook.react.ReactApplication;\n import com.facebook.react.ReactInstanceManager;\n import com.facebook.react.ReactNativeHost;\n import com.facebook.react.ReactPackage;\n+import com.facebook.react.views.text.ReactFontManager;\n import com.facebook.soloader.SoLoader;\n import java.lang.reflect.InvocationTargetException;\n import java.util.List;\n@@ -43,6 +44,7 @@ public class MainApplication extends Application implements ReactApplication {\n   @Override\n   public void onCreate() {\n     super.onCreate();\n+    ReactFontManager.getInstance().addCustomFont(this, \"Raleway\", R.font.raleway);\n     SoLoader.init(this, /* native exopackage */ false);\n     initializeFlipper(this, getReactNativeHost().getReactInstanceManager());\n   }\n\n```\n\n**On React Native 0.73+**\n\n```diff\n--- a/android/app/src/main/java/com/fontdemo/MainApplication.kt\n+++ b/android/app/src/main/java/com/fontdemo/MainApplication.kt\nimport com.facebook.react.ReactApplication\nimport com.facebook.react.ReactHost\nimport com.facebook.react.ReactNativeHost\nimport com.facebook.react.ReactPackage\n+import com.facebook.react.common.assets.ReactFontManager\nimport com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load\nimport com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost\nimport com.facebook.react.defaults.DefaultReactNativeHost\n\n\n  override fun onCreate() {\n    super.onCreate()\n+    ReactFontManager.getInstance().addCustomFont(this, \"Raleway\", R.font.raleway);\n    SoLoader.init(this, false)\n    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {\n      // If you opted-in for the New Architecture, we load the native entry point for this app.\n      load()\n    }\n    ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)\n  }\n\n```\n\n## iOS\n\nOn iOS, things will get much easier. We will basically just need to use React Native asset link functionality.\nThis method requires that we use the font family name retrieved in the first step\nas `fontFamily` style attribute.\n\n### Copy font files to assets folder\n\n```sh\nmkdir -p assets/fonts\ncp /tmp/raleway/*.ttf assets/fonts\n```\n\n### Add `react-native.config.js`\n\n```js\nmodule.exports = {\n  project: {\n    ios: {},\n    android: {},\n  },\n  iosAssets: ['./assets/fonts'],\n};\n```\n\n### Link\n\n```sh\n# react-native \u003e= 0.69\nnpx react-native-asset\n\n# otherwise\nreact-native link\n```\n\n## Result\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eiOS\u003c/th\u003e\n\u003cth\u003eAndroid\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"img/react-native-fonts-ios.png\" /\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"img/react-native-fonts-android.png\" /\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Postscriptum\n\nIf you found this guide relevant, I would greatly appreciate that you upvote [this StackOverflow answer](https://stackoverflow.com/a/70247374/2779871). It would also help the community finding out this solution. Cheers!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsamr%2Freact-native-font-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsamr%2Freact-native-font-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsamr%2Freact-native-font-demo/lists"}