{"id":26601107,"url":"https://github.com/kylerjensen/react-native-font-faces","last_synced_at":"2025-04-09T16:30:44.640Z","repository":{"id":40372836,"uuid":"278546729","full_name":"kylerjensen/react-native-font-faces","owner":"kylerjensen","description":"Easily emulate font-face behavior in react-native","archived":false,"fork":false,"pushed_at":"2023-04-17T12:32:42.000Z","size":2159,"stargazers_count":16,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T18:50:00.085Z","etag":null,"topics":["custom-fonts","expo","font-face","font-style","font-weight","fonts","react-native","react-native-web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/kylerjensen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2020-07-10T05:30:06.000Z","updated_at":"2024-06-27T02:00:56.000Z","dependencies_parsed_at":"2024-06-21T20:24:31.313Z","dependency_job_id":"c35bc886-c513-40d0-9bc3-d7f5d45f0045","html_url":"https://github.com/kylerjensen/react-native-font-faces","commit_stats":{"total_commits":102,"total_committers":6,"mean_commits":17.0,"dds":"0.32352941176470584","last_synced_commit":"871ff0d6f646494141e3c673626a9a62a408d8a9"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylerjensen%2Freact-native-font-faces","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylerjensen%2Freact-native-font-faces/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylerjensen%2Freact-native-font-faces/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylerjensen%2Freact-native-font-faces/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kylerjensen","download_url":"https://codeload.github.com/kylerjensen/react-native-font-faces/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248067648,"owners_count":21042334,"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":["custom-fonts","expo","font-face","font-style","font-weight","fonts","react-native","react-native-web"],"created_at":"2025-03-23T18:36:51.372Z","updated_at":"2025-04-09T16:30:44.617Z","avatar_url":"https://github.com/kylerjensen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Font Faces\n\nEasily emulate @font-face behavior in react-native.\n\n## Motivation:\n\nUsing custom fonts in React Native becomes complicated when trying to work with different font weights and styles. Even though the React Native `TextStyle` type includes properties for `fontFamily`, `fontWeight` and `fontStyle`, these properties seem to work only for the default built-in fonts, and have limited support when using custom fonts. For this reason, selecting a specific font weight and style is traditionally achieved by specifying the exact PostScript name of the desired loaded font file.\n\nFor example:\n\n```jsx\nconst style: ViewStyle = {\n  fontFamily: 'Roboto-MediumItalic',\n};\n```\n\nThis makes it difficult to achieve merged styles or text style composition. A preferable solution might be something like this:\n\n```jsx\nconst style: ViewStyle = {\n  fontFamily: 'Roboto',\n  fontWeight: '500',\n  fontStyle: 'italic',\n};\n```\n\nThis library aims to make life easier by allowing React Native developers to use `fontWeight` and `fontStyle` with custom fonts on iOS, Android, and Web.\n\n## Getting Started\n\n1. Add the required dependencies to your application's `package.json`:\n\n   ```shell\n   yarn add react-native-font-faces\n   ```\n\n   If you are using Expo and need to load additional custom font files into your app, also add the following:\n\n   ```shell\n   yarn add expo-font\n   ```\n\n2. Add a call to `enableFontFaces()` in your application's entry point, and import the desired font faces. Then just use the font family as you would normally expect:\n\n   ```jsx\n   // App.tsx\n\n   import React from 'react';\n   import { useFonts } from 'expo-font';\n   import { AppLoading } from 'expo';\n   import { AppContent } from './AppContent';\n   import { Roboto_All, enableFontFaces, getExpoFontMap } from 'react-native-font-faces';\n\n   enableFontFaces(Roboto_All);\n\n   export default function App() {\n     const [loaded, error] = useFonts(getExpoFontMap(Roboto_All));\n\n     if (!loaded) {\n       return \u003cAppLoading /\u003e;\n     } else if (error) {\n       return \u003cText\u003e{error.message}\u003c/Text\u003e;\n     } else {\n       return (\n         \u003cView style={styles.container}\u003e\n           \u003cStatusBar style=\"auto\" /\u003e\n           \u003cText style={styles.text}\u003eThis should be Regular\u003c/Text\u003e\n           \u003cText style={[styles.text, styles.italic]}\u003eThis should be Italic\u003c/Text\u003e\n           \u003cText style={[styles.text, styles.bold]}\u003eThis should be Bold\u003c/Text\u003e\n           \u003cText style={[styles.text, styles.bold, styles.italic]}\u003eThis should be BoldItalic\u003c/Text\u003e\n           \u003cText style={[styles.text, styles.thin]}\u003eThis should be Thin\u003c/Text\u003e\n           \u003cText style={[styles.text, styles.thin, styles.italic]}\u003eThis should be ThinItalic\u003c/Text\u003e\n         \u003c/View\u003e\n       );\n     }\n   }\n\n   const styles = StyleSheet.create({\n     text: {\n       fontFamily: 'Roboto',\n     },\n     bold: {\n       fontWeight: 'bold',\n     },\n     thin: {\n       fontWeight: '100',\n     },\n     italic: {\n       fontStyle: 'italic',\n     },\n     container: {\n       flex: 1,\n       backgroundColor: '#fff',\n       alignItems: 'center',\n       justifyContent: 'center',\n     },\n   });\n   ```\n\n## Migrating from 3.x\n\nIn version 4.x, we removed `FontFacesProvider` and added `enableFontFaces`. Follow these steps to migrate:\n\n1. Remove all instances of `\u003cFontFacesProvider /\u003e`.\n2. Add a call to `enableFontFaces()` in your application's entrypoint.\n3. (Optional) Add a call to `useFonts()` (expo-font) or `loadFonts()` (react-native-dynamic-fonts) to dynamically load remote fonts.\n\n## Migrating from 2.x\n\nIn version 3.x, we simplified `FontFacesProvider` and removed `useFontFaces`. Follow these steps to migrate:\n\n1. Remove all instances of `useFontFaces()`.\n2. Update your application's `\u003cFontFacesProvider/\u003e` to provide the `onLoading` and `onError` props (optional).\n\n## Migrating from 1.x\n\nIn version 2.x, we introduced `FontFacesProvider` and `useFontFaces`, and removed `enableFontFaces`. Follow these steps to migrate:\n\n1. Remove all instances of `enableFontFaces()`.\n2. Add a `\u003cFontFacesProvider/\u003e` around your application's root component.\n3. Add `const [fontsLoaded] = useFontFaces(...)` inside an inner function component's body and handle the `fontsLoaded` value appropriately.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkylerjensen%2Freact-native-font-faces","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkylerjensen%2Freact-native-font-faces","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkylerjensen%2Freact-native-font-faces/lists"}