{"id":26601090,"url":"https://github.com/mthines/react-native-font-face","last_synced_at":"2025-04-09T16:24:46.658Z","repository":{"id":57128568,"uuid":"382940669","full_name":"mthines/react-native-font-face","owner":"mthines","description":"Font Face (CSS style) for React Native made easy","archived":false,"fork":false,"pushed_at":"2022-07-26T06:39:06.000Z","size":515,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T18:50:02.659Z","etag":null,"topics":["font","font-face","react","react-native","typography"],"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/mthines.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}},"created_at":"2021-07-04T20:16:16.000Z","updated_at":"2024-10-30T08:56:42.000Z","dependencies_parsed_at":"2022-08-31T18:32:31.317Z","dependency_job_id":null,"html_url":"https://github.com/mthines/react-native-font-face","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":"mthines/typescript-package-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mthines%2Freact-native-font-face","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mthines%2Freact-native-font-face/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mthines%2Freact-native-font-face/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mthines%2Freact-native-font-face/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mthines","download_url":"https://codeload.github.com/mthines/react-native-font-face/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248066173,"owners_count":21042052,"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":["font","font-face","react","react-native","typography"],"created_at":"2025-03-23T18:36:47.016Z","updated_at":"2025-04-09T16:24:46.639Z","avatar_url":"https://github.com/mthines.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Font Face\n\n[![NPM](https://nodei.co/npm/@mthines/react-native-font-face.png?mini=true)](https://www.npmjs.com/package/@mthines/react-native-font-face)\n\n## What is it?\n\n[CSS Font Face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) is a powerful way of grouping multiple fonts files, into a single group, and then based on the passed properties, dynamically changing the font file.\n\nThere's no great solution like that native in React Native, so this project aims to fix that.\n\n### The Mission\n\nI wanted to dynamically be able to change font based on the passed styles (like how it works in CSS).\n\n```tsx\nconst Component = () =\u003e (\n  \u003cView\u003e\n    {/** This should be bold */}\n    \u003cTxt style={{ fontWeight: 600 }}\u003eMy text\u003c/Txt\u003e\n\n    {/** This should be regular */}\n    \u003cTxt style={{ fontWeight: 400 }}\u003eMy text\u003c/Txt\u003e\n\n    {/** This should be italic */}\n    \u003cTxt style={{ fontStyle: 'italic' }}\u003eMy text\u003c/Txt\u003e\n  \u003c/View\u003e\n);\n```\n\n### Considerations\n\nThe reasoning behind the approach of an Object with keys like `${fontFamily}.${fontStyle}.${fontWeight}` are due to performance.\nLike this we don't need to call a function in the `Txt` component, but can get the value from the object directly, like:\n\n```tsx\nfontFace[`${fontFamily}.${fontStyle}.${fontWeight}`];\n```\n\n---\n\n## Table of Contents\n\n- [React Native Font Face](#react-native-font-face)\n  - [What is it?](#what-is-it)\n    - [The Mission](#the-mission)\n    - [Considerations](#considerations)\n  - [Table of Contents](#table-of-contents)\n  - [Prerequisite](#prerequisite)\n  - [How to use it?](#how-to-use-it)\n    - [1. Declare a global constant as your font face](#1-declare-a-global-constant-as-your-font-face)\n      - [`constants/font.ts`](#constantsfontts)\n    - [2. Make a Text component which gets the `fontFamily` from the passed `style` and the global constant font face](#2-make-a-text-component-which-gets-the-fontfamily-from-the-passed-style-and-the-global-constant-font-face)\n      - [`components/text.tsx`](#componentstexttsx)\n    - [3. Done! Now use the text component ☺️](#3-done-now-use-the-text-component-️)\n      - [`components/screen/home.tsx`](#componentsscreenhometsx)\n\n## Prerequisite\n\nYou need to have added your custom fonts to the project. See this thread for more: https://stackoverflow.com/a/41827668/1951459\n\n## How to use it?\n\n### 1. Declare a global constant as your font face\n\n#### `constants/font.ts`\n\n```tsx\nimport { setFontFace } from '@mthines/react-native-font-face';\n\nexport type FontName = 'Roboto';\nexport type FontFamilies = 'Roboto-Bold' | 'Roboto-Italic' | 'Roboto-Regular';\n\nexport const fontFace = setFontFace\u003cFontName, FontFamilies\u003e([\n  {\n    font: 'Roboto-Regular',\n    style: {\n      fontFamily: 'Roboto',\n      fontStyle: 'normal',\n      fontWeight: '400',\n    },\n  },\n  {\n    font: 'Roboto-Bold',\n    style: {\n      fontStyle: 'normal',\n      fontFamily: 'Roboto',\n      fontWeight: '600',\n    },\n  },\n  {\n    font: 'Roboto-Italic',\n    style: {\n      fontWeight: '400',\n      fontFamily: 'Roboto',\n      fontStyle: 'italic',\n    },\n  },\n]);\n```\n\n### 2. Make a Text component which gets the `fontFamily` from the passed `style` and the global constant font face\n\n#### `components/text.tsx`\n\n```tsx\nimport { fontFace } from 'constants/font.tsx';\n\ntype Props = {\n  children?: ReactNode;\n  style?: TextStyle;\n};\n\nconst Txt = ({\n  children,\n  style: { fontFamily = 'Roboto', fontWeight = '400', fontStyle = 'normal', ...style } = {} as TextStyle,\n}: Props) =\u003e {\n  // Defining the Font Key in a separate variable, so we can type it for the index of the Object\n  // We need to cast `fontFamily` to `FontName`, as the fontFamily type is coming from the `TextStyle`,\n  // which has no relation to our `FontName`\n  const fontKey: FontKey\u003cFontName\u003e = `${fontFamily as FontName}.${fontStyle}.${fontWeight}`;\n\n  // Get the actual font from the fonts Object matching the key, or use a fallback\n  const fontFaceFamily = fontFace[fontKey] || fontFace['Roboto.normal.400'];\n\n  return \u003cText style={{ fontFamily: fontFaceFamily, ...style }}\u003e{children}\u003c/Text\u003e;\n};\n\nexport default Txt;\n```\n\n**NOTE:** You could also consider adding the font props as separate props, instead of destructuring them from `style` prop.\n\n### 3. Done! Now use the text component ☺️\n\nNow the Component will dynamically select which font file to use, when displaying the text.\n\n#### `components/screen/home.tsx`\n\n```tsx\nimport Txt from 'components/text';\n\nconst Home = () =\u003e {\n  return (\n    \u003cView\u003e\n      \u003cTxt style={{ fontWeight: 600 }}\u003eI will be bold\u003c/Txt\u003e\n      \u003cTxt style={{ fontWeight: 400 }}\u003eI will be regular\u003c/Txt\u003e\n      \u003cTxt style={{ fontStyle: 'italic' }}\u003eI will be italic\u003c/Txt\u003e\n    \u003c/View\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmthines%2Freact-native-font-face","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmthines%2Freact-native-font-face","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmthines%2Freact-native-font-face/lists"}