summaryrefslogtreecommitdiff
path: root/assets/fonts/custom-fonts.md
diff options
context:
space:
mode:
authorKirill Rogovoy <[email protected]>2021-07-20 21:24:52 +0300
committerKirill Rogovoy <[email protected]>2021-07-20 21:24:52 +0300
commit5f4611d65e40eae3ca6191a15f68d69ea5a1c4cb (patch)
tree273dfc086444533d86d580961c92ba8d14781a67 /assets/fonts/custom-fonts.md
parentf0bf4e7afdcd8b02a62be45ab3e7d047ed865a79 (diff)
WIP
Diffstat (limited to 'assets/fonts/custom-fonts.md')
-rw-r--r--assets/fonts/custom-fonts.md24
1 files changed, 0 insertions, 24 deletions
diff --git a/assets/fonts/custom-fonts.md b/assets/fonts/custom-fonts.md
deleted file mode 100644
index da69cba..0000000
--- a/assets/fonts/custom-fonts.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Instructions for adding custom fonts to your ignite app:
-
-## For Expo Projects
-
-You're lucky. Most of the work is done for you. Just download the `TTF` or `OTF` files you want to use, place them in `./app/theme/fonts/` and load them in the `index.ts` file in that same directory.
-
-ignite integrated `expo-fonts` according to [this guide](https://docs.expo.io/versions/latest/sdk/font/).
-
-## For Non-Expo Projects
-
-1. Find a font in `TTF` or `OTF` format that you like and put it in `./assets/fonts/`. I picked [this one](https://fonts.google.com/specimen/Shadows+Into+Light).
-2. Now run `npx react-native link`. Even though we're past react native 0.60 we can still use this command to link the fonts. This is a one-way operation. You'll have to remove fonts yourself later if you want to remove them from your app. This will add items to your xcode project and `Info.plist` file as well as putting some files in place for android to bundle (specifically, it will move the font files to `./android/app/src/main/assets/).
-3. Both iOS and Android changes must be committed to source control, but sometimes other common libraries like `react-native-vector-icons` may mess with this process and add some fonts you don't intend to ship. Make sure to review these changes carefully before pushing any changes to source control.
-4. The tricky part is next: knowing what font family to use. iOS uses the family name like `{fontFamily: 'ShadowsIntoLight'}` whereas on android, you must include all the different variations of the font you will use and reference them by their _filename_. So I downloaded `ShadowsIntoLight-Regular.ttf` that means android must use `{fontFamily: 'ShadowsIntoLight-Regular'}` (yes, it's case sensitive 🙄). [There are components to help you deal with this](https://github.com/lendup/react-native-cross-platform-text) or you can roll your own based on your needs and something like:
-
-```
-const CUSTOM_FONT_TEXT: TextStyle = {
- fontFamily: Platform.select({
- ios: "ShadowsIntoLight", // The font family name
- android: "ShadowsIntoLight-Regular", // The file name
- }),
- // ... whatever else
-}
-```