{"id":25409263,"url":"https://github.com/ftzi/expo-font-loader","last_synced_at":"2025-04-13T19:45:43.250Z","repository":{"id":115671228,"uuid":"456304573","full_name":"ftzi/expo-font-loader","owner":"ftzi","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-12T20:32:52.000Z","size":296,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T19:17:04.190Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ftzi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2022-02-06T23:58:20.000Z","updated_at":"2022-02-07T23:07:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"77fe6dc7-f6e4-47c1-9dd6-0c4059e136d8","html_url":"https://github.com/ftzi/expo-font-loader","commit_stats":{"total_commits":22,"total_committers":1,"mean_commits":22.0,"dds":0.0,"last_synced_commit":"7d8e86fdefd904a5fc644420a8f4868ff5544159"},"previous_names":["hfantauzzi/expo-font-loader","srbrahma/expo-font-loader","brfantauzzi/expo-font-loader","ftzi/expo-font-loader"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ftzi%2Fexpo-font-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ftzi%2Fexpo-font-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ftzi%2Fexpo-font-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ftzi%2Fexpo-font-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ftzi","download_url":"https://codeload.github.com/ftzi/expo-font-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248772684,"owners_count":21159330,"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":[],"created_at":"2025-02-16T08:25:02.769Z","updated_at":"2025-04-13T19:45:43.219Z","avatar_url":"https://github.com/ftzi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- \u003cimg src=\".logo.png\" alt=expo-font-loader/\u003e\u003cbr/\u003e --\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm](https://img.shields.io/npm/v/expo-font-loader)](https://www.npmjs.com/package/expo-font-loader)\n[![TypeScript](https://badgen.net/npm/types/env-var)](http://www.typescriptlang.org/)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\u003c!-- [![npm](https://img.shields.io/npm/dm/expo-font-loader)](https://www.npmjs.com/package/expo-font-loader) --\u003e\n\u003c/div\u003e\n\n# expo-font-loader\n\nAlmost 2 years ago [I've shared a little hack for expo-font](https://github.com/expo/google-fonts/issues/6). Now, it's improved and it's a npm package!\n\nIt's about smartly loading and using fonts with [@expo-google-fonts](https://github.com/expo/google-fonts) and icons with [@expo/vector-icons](https://github.com/expo/vector-icons) - icons are actually fonts!\n\nWithout this, you have to manually type the `fontFamily` in a Text style, e.g. `fontFamily: 'Roboto_500Medium'`. This is bad because you may not know or forget exactly what is its name, you may make a typo, you may have forgot to load it, you have to fully type it...\n\nWith this package, you speficify the fonts to be loaded, and it's returned a `Fonts` (or `F`, alias) object to be used in the fontFamily. As it's type smart, when you have `fontFamily: F.`, the IntelliSense will show all the available fontsFamilies you can use, and you can safely and quickly pick the one you want. It will complete with for example `F.Roboto_500Medium`. It's very useful when dealing with various fontsFamilies, so you can see all the options and quickly pick the one that best fits the text.\n\nIf you remove a font to be loaded and it's being used somewhere, there will be a Type error, as it knows that font isn't available to be used.\n\n## 💿 Installation\n```bash\nexpo install expo-font-loader expo-font\n```\n\n## 📖 Usage\n\n#### Font and icon usage\n```tsx\nconst styles = StyleSheet.create({\n  text: {\n    // Type safe and smart!\n    fontFamily: F.Roboto_500Medium\n  },\n  monoText: {\n    // Aliases are used in the same way!\n    fontFamily: F.monospace\n  }\n});\n\nfunction Component() {\n  return (\u003cIcons.MaterialCommunityIcons ... /\u003e)\n}\n\n```\n\n#### Setup\n```tsx\nimport { Platform } from 'react-native';\n// Your icons to be loaded on start\nimport { Entypo, MaterialCommunityIcons } from '@expo/vector-icons';\n// Your fonts to be loaded on start\nimport * as Roboto from '@expo-google-fonts/roboto';\n// You can load single fonts instead of the whole family\nimport { Inter_900Black } from '@expo-google-fonts/inter';\nimport { createFontsToLoad } from 'expo-font-loader'\n\n// F is an alias to Fonts, as I is an alias to Icons.\nexport const { F, Icons, useFonts, loadFonts } = createFontsToLoad({\n  fontsToLoad: {\n    ...Roboto,\n    Inter_900Black\n  },\n  // If we don't previously load the icons, they may take a while to show up!\n  iconsToLoad: {\n    MaterialCommunityIcons,\n    Entypo,\n  },\n  aliases: {\n    monospace: Platform.OS === 'ios' ? 'Courier' : 'monospace', // 'monospace' is automatically added by default!\n  },\n});\n```\n\n#### App init\n```tsx\nimport { useFonts } from './fonts.ts'\n\nconst App () =\u003e {\n  /**\n   * 1.1.0 Update!\n   * You can now use loadFonts instead of useFonts, to be used instead of Font.loadAsync(fonts)\n   * as described in https://docs.expo.dev/versions/latest/sdk/splash-screen.\n   * */\n  const [fontsLoaded, error] = useFonts();\n\n  if (!fontsLoaded)\n    // https://docs.expo.dev/versions/latest/sdk/app-loading/\n    return \u003cAppLoading/\u003e\n\n  return \u003cComponents ... /\u003e\n}\n```\n\n## 📰 [Changelog](https://github.com/SrBrahma/expo-font-loader/blob/main/CHANGELOG.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fftzi%2Fexpo-font-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fftzi%2Fexpo-font-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fftzi%2Fexpo-font-loader/lists"}