{"id":26601120,"url":"https://github.com/ojdx/react-font-face","last_synced_at":"2025-04-09T16:30:45.284Z","repository":{"id":71869926,"uuid":"93977526","full_name":"ojdx/react-font-face","owner":"ojdx","description":null,"archived":false,"fork":false,"pushed_at":"2018-06-19T11:51:31.000Z","size":239,"stargazers_count":17,"open_issues_count":6,"forks_count":5,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-03-21T02:03:48.456Z","etag":null,"topics":["custom-fonts","font-declarations","font-face","google-fonts","icon-font","react","react-components","storybook"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/ojdx.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":"2017-06-11T02:44:39.000Z","updated_at":"2024-05-31T08:03:35.000Z","dependencies_parsed_at":"2023-05-19T04:15:29.750Z","dependency_job_id":null,"html_url":"https://github.com/ojdx/react-font-face","commit_stats":{"total_commits":26,"total_committers":2,"mean_commits":13.0,"dds":"0.23076923076923073","last_synced_commit":"a2ba7f9d02813de74c0ccd479675de252db42dd2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ojdx%2Freact-font-face","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ojdx%2Freact-font-face/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ojdx%2Freact-font-face/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ojdx%2Freact-font-face/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ojdx","download_url":"https://codeload.github.com/ojdx/react-font-face/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248067649,"owners_count":21042335,"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","font-declarations","font-face","google-fonts","icon-font","react","react-components","storybook"],"created_at":"2025-03-23T18:36:54.057Z","updated_at":"2025-04-09T16:30:45.266Z","avatar_url":"https://github.com/ojdx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Font Face \n\nThis package is a higher order component you can use in your React components to use custom fonts, icon fonts or Google imported fonts.  This HOC uses [react-helmet](https://github.com/nfl/react-helmet) to inject the font-face declarations into the head in an efficient and consolidated manner.  \n\n### Why?\n\nReact components should be truly modular.  Where this falls apart is when you use custom fonts.  Yes, we can use SVG's to replace icon fonts but we still need to use custom fonts on occasion, which forces us to use global CSS in a React application.  This feels weird to still maintain a global stylesheet just for font declarations.  \n\nThis component allows you to package custom fonts with your component and easily use the component in a project with the expected style rendered.\n\n### Usage\n\nInstall and save to your environment use the terminal. \n\n```bash\nnpm install react-font-face --save\n```\n\nImport the package in your app. \n\n\nWrap your component in the higher order component where ever you export the component.  You will also need to pass in an config object using Google Fonts, your own font files or both.\n\n```js\nimport ReactFontFace from 'react-font-face'\n// SHOWS IMPORT OF LOCAL FILE\nimport bangersFont from './Bangers-Regular.ttf'\n\n// BUILD YOUR STYLES\nconst styles = {\n  main: {\n    margin: 15,\n    lineHeight: 1.4,\n    fontFamily: 'Bangers',\n  },\n  google1: {\n    fontFamily: 'Pangolin',\n  },\n  google2: {\n    fontFamily: 'Roboto Mono',\n  },\n};\n\n// THE ACTUAL COMPONENT\nclass ExampleStyledComponent extends React.Component {\n  render() {\n    return (\n      \u003cdiv style={styles.main}\u003e\n        \u003cp\u003eCustom font from main style.\u003c/p\u003e\n        \u003cp style={ styles.google1 }\u003eCustom Font from first google style.\u003c/p\u003e\n        \u003cp style={ styles.google2 }\u003eCustom Font from second google style.\u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n// CONFIG OBJECT TO PASS TO HOC\nlet fontConfig = {\n  google: [\n    'Pangolin',\n    'Roboto Mono',\n    \n    // MORE FONTS IN THE ARRAY\n    ...\n  ],\n  file: [\n    {\n      fontFamily: 'Bangers',\n      fontStyle:  'normal',\n      fontWeight: 400,\n      unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215',\n      file: bangersFont,\n      fontType: 'truetype',\n      fileLocal: 'Bangers Regular'\n    },\n    \n    // MORE FONTS IN THE ARRAY\n    ...\n  ],\n}\n\n// WRAP THE EXPORTED COMPONENT \nexport default ReactFontFace(ExampleStyledComponent, fontConfig);\n```\n\n\n\n\n### Development\n\nTo test it out the package locally, pull the repo and run storybook.\n\n```bash\n$ git clone https://github.com/ojdx/react-font-face.git\n$ cd /react-font-face\n$ npm install\n$ npm run storybook\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fojdx%2Freact-font-face","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fojdx%2Freact-font-face","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fojdx%2Freact-font-face/lists"}