{"id":18369925,"url":"https://github.com/cawfree/react-native-custom-fonts","last_synced_at":"2025-09-19T05:38:18.263Z","repository":{"id":37167534,"uuid":"196050998","full_name":"cawfree/react-native-custom-fonts","owner":"cawfree","description":"Use dynamic fonts specified via a network location, instead of managing them in your native builds!","archived":false,"fork":false,"pushed_at":"2023-01-06T06:00:30.000Z","size":15929,"stargazers_count":55,"open_issues_count":31,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T04:31:57.088Z","etag":null,"topics":["download","font","fonts","native","network","react","rn"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cawfree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-09T17:07:16.000Z","updated_at":"2025-01-22T03:29:16.000Z","dependencies_parsed_at":"2023-02-05T12:01:24.002Z","dependency_job_id":null,"html_url":"https://github.com/cawfree/react-native-custom-fonts","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/cawfree%2Freact-native-custom-fonts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-custom-fonts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-custom-fonts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-custom-fonts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawfree","download_url":"https://codeload.github.com/cawfree/react-native-custom-fonts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247531375,"owners_count":20953943,"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":["download","font","fonts","native","network","react","rn"],"created_at":"2024-11-05T23:33:40.415Z","updated_at":"2025-09-19T05:38:18.142Z","avatar_url":"https://github.com/cawfree.png","language":"Java","funding_links":["https://www.buymeacoffee.com/cawfree"],"categories":[],"sub_categories":[],"readme":"# react-native-custom-fonts\nUse dynamic fonts specified via a network location, instead of managing them in your native builds!\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./bin/out.gif\" alt=\"react-native-custom-fonts\" width=\"400\" height=\"800\"\u003e\n\u003c/p\u003e\n\n## 🚀 Getting Started\n\n**\u003e=0.60.0**\n\n```bash\nyarn add react-native-custom-fonts # or npm install --save react-native-custom-fonts\n```\n\nThen rebuild your app. On iOS, be sure to `pod install` your cocoapods in your app's `/ios` directory.\n\n**\u003c=0.59.X**\n\nUsing [`yarn`](https://www.npmjs.com/package/react-native-custom-fonts):\n\n```bash\nyarn add react-native-custom-fonts\nreact-native link react-native-custom-fonts\n```\n\n## Breaking Changes\n\n  - **\u003c1.2.0**\n    - We've added a bunch of stability improvements, and migrated to a new [Hooks](https://reactjs.org/docs/hooks-intro.html)-based API.\n    - The `fontFaces` array prop has been turned into a `fontFaces` object, whose keys are the _names_ of font styles you'd like to reference in your app.\n    - To use a `fontFace`, you must specify the name in a call to `useCustomFont(name:String)`.\n\n## ✍️ Example \n\nPlease check out the [example](https://github.com/cawfree/react-native-custom-fonts/blob/master/example/App.js) project for a full demonstration. Just `cd` into the directory, use `npm` or `yarn` to install the dependencies, then execute the app using the following:\n\n```bash\nreact-native run-android # run on android\nreact-native run-ios     # run on ios\n```\n\n\n### Simple \u003cText /\u003e\n\n```javascript\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {View, Text} from \"react-native\";\nimport CustomFontsProvider, {useCustomFont} from \"react-native-custom-fonts\";\n\nconst fontFaces = {\n  // XXX: Specify the local name of your font. You'll use this to refer to it via the useCustomFont hook.\n  'UbuntuBold': {\n    uri: 'https://github.com/google/fonts/raw/master/ufl/ubuntu/Ubuntu-Bold.ttf',\n    fontFamily: 'Ubuntu',\n    fontWeight: 'bold',\n    // XXX: You can also specify additional font styling.\n    color: 'blue',\n  },\n};\n\nconst SomeComponent = () =\u003e {\n  // Fetch the desired font by name. When the font has been cached, it will automatically update the View.\n  const {...fontProps} = useCustomFont('UbuntuBold');\n  return (\n    \u003cText\n      {...fontProps}\n      children=\"Hello, world!\"\n    /\u003e\n  );\n};\n\nexport default () =\u003e (\n  \u003cCustomFontsProvider\n    fontFaces={fontFaces}\n  \u003e\n    \u003cSomeComponent /\u003e\n  \u003c/CustomFontsProvider\u003e\n);\n```\n\n### Where's my ref?\n\n`react-native-custom-fonts` captures the `ref` prop of the `Text` component to make runtime property assignment. You can still access the ref, in one of two ways:\n\nYou can either **supply a ref**:\n\n```javascript\nconst ref = useRef();\nconst {...fontProps} = useCustomFont('UbuntuBold', ref);\nreturn (\n  \u003cText\n    ref={ref}\n    {...fontProps}\n  /\u003e\n);\n```\n\nOr you can **use the provided ref**:\n\n```javascript\nconst {ref, ...fontProps} = useCustomFont('UbuntuBold');\nreturn (\n  \u003cText\n    ref={ref}\n    {...fontProps}\n  /\u003e\n);\n```\n\n### Awesome, so what about additional styles?\n\nIt's possible to do this, too. Just fetch the `style` prop from the call to `useCustomFont`:\n\n```javascript\nconst {style, ...fontProps} = useCustomFont('UbuntuBold');\nreturn (\n  \u003cTextInput\n    style={[style, {fontColor: 'blue'}]}\n    {...fontProps}\n  /\u003e\n);\n```\n\n## 📌 Prop Types\n\n### `CustomFontsProvider`\nThis is a React Context Provider for all children who were wrapped with a call to `ReactNativeCustomFonts.withCustomFont`. Manages the caching and assignment of remote fonts to children.\n\n| Prop Name            | Data Type                                                                                                                                              | Required | Default    | Description                                                                                           |\n|----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|----------|------------|-------------------------------------------------------------------------------------------------------|\n| `fontFaces`          | propTypes.shape({}) | false    | {}         | Defines the configuration of the remote fonts.                                                           |\n| `fallback`          | propTypes.shape({}) | false    | {color: 'red', fontWeight:'bold'}         | The style to use when font downloads fail.                                                           |\n| `onDownloadDidStart` | propTypes.func                                                                                                                                         | false    | () =\u003e null | Callback for when the Provider begins downloading the fontFaces.                                      |\n| `onDownloadDidEnd`   | propTypes.func                                                                                                                                         | false    | () =\u003e null | Callback for when the Provider has completed downloading the fontFaces.                               |\n| `onDownloadDidError`   | propTypes.func                                                                                                                                         | false    | () =\u003e null | Called when an error has been thrown when downloading the fontFaces.                               |\n\n## 😬 Contributing\nPlease report any [issues](https://github.com/cawfree/react-native-custom-fonts/issues) you come across, and feel free to [submit a Pull Request](https://github.com/cawfree/react-native-custom-fonts/pulls) if you'd like to add any enhancements. To make any changes, you can just branch from  `master`.\n\n## ✌️ License\n[MIT](https://opensource.org/licenses/MIT)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/cawfree\"\u003e\n    \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy @cawfree a coffee\" width=\"232\" height=\"50\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-custom-fonts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawfree%2Freact-native-custom-fonts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-custom-fonts/lists"}