Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add support for custom app fonts #1828

Merged
merged 5 commits into from
Feb 12, 2024
Merged

feat: add support for custom app fonts #1828

merged 5 commits into from
Feb 12, 2024

Conversation

tido64
Copy link
Member

@tido64 tido64 commented Feb 8, 2024

Description

Add support for custom app fonts.

Resolves #1506.
Resolves #1185.
Resolves #1813.

Platforms affected

  • Android
  • iOS
  • macOS
  • Windows

Test plan

  1. Download a random font and put it somewhere in the example folder (in my case, I put mine in example/dist)
  2. Add the font to resources in app.json (an entry for every target platform):
    diff --git a/example/app.json b/example/app.json
    index ef69fa7..c5a1910 100644
    --- a/example/app.json
    +++ b/example/app.json
    @@ -16,15 +16,18 @@
       "resources": {
         "android": [
           "dist/res",
    -      "dist/main.android.jsbundle"
    +      "dist/main.android.jsbundle",
    +      "dist/MyFont.ttf"
         ],
         "ios": [
           "dist/assets",
    -      "dist/main.ios.jsbundle"
    +      "dist/main.ios.jsbundle",
    +      "dist/MyFont.ttf"
         ],
         "macos": [
           "dist/assets",
    -      "dist/main.macos.jsbundle"
    +      "dist/main.macos.jsbundle",
    +      "dist/MyFont.ttf"
         ],
         "windows": [
           "dist/assets",
  3. Use the font:
    diff --git a/example/App.tsx b/example/App.tsx
    index c94affc..93821a6 100644
    --- a/example/App.tsx
    +++ b/example/App.tsx
    @@ -136,6 +136,7 @@ function useStyles() {
           groupItemLabel: {
             color: isDarkMode ? Colors.white : Colors.black,
             flex: 1,
    +        fontFamily: "MyFont",
             fontSize,
             marginVertical: 12,
           },

Build the example app as usual. Remember that every time you make changes to app.json, you need to re-run pod install.

Verify that fonts are copied/registered:

  • Android: Your font(s) should be found under example/android/app/build/generated/rncli/src/main/assets/fonts
  • iOS: Your font(s) should be registered in example/node_modules/.generated/ios/Info.plist
  • macOS: Your font(s) should be registered in example/node_modules/.generated/macos/Info.plist

Screenshots

Android iOS macOS
Screenshot_1707395932 Simulator Screenshot - iPhone 15 Pro - 2024-02-08 at 11 29 22 Screenshot 2024-02-08 at 11 38 34

@github-actions github-actions bot added platform: iOS This affects iOS platform: macOS This affects macOS labels Feb 8, 2024
@github-actions github-actions bot added the platform: Android This affects Android label Feb 8, 2024
@tido64 tido64 marked this pull request as ready for review February 8, 2024 12:59
@tido64 tido64 mentioned this pull request Feb 8, 2024
1 task
@kelset
Copy link
Contributor

kelset commented Feb 8, 2024

Testing:

iOS ✅

Simulator Screenshot - iPhone 15 - 2024-02-12 at 11 18 32

macOS ✅

Screenshot 2024-02-12 at 11 19 07

Android ✅

Screenshot_1707736715

The one thing I noticed though is that for Android the font file copied over in example/android/app/build/generated/rncli/src/main/assets/fonts was uncapitalized, pacifico-regular instead of Pacifico-Regular. fixed with latest commit 👍

test-app.gradle Outdated Show resolved Hide resolved
Copy link
Contributor

@kelset kelset left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM and we can :shipit:

the lowercase thing for Android can be handled as a follow up if needed

@tido64 tido64 enabled auto-merge (squash) February 12, 2024 12:00
@tido64 tido64 merged commit a9ff329 into trunk Feb 12, 2024
27 checks passed
@tido64 tido64 deleted the tido/fonts branch February 12, 2024 12:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
platform: Android This affects Android platform: iOS This affects iOS platform: macOS This affects macOS
Projects
None yet
Development

Successfully merging this pull request may close these issues.

iOS / Android Assets iOS/macOS: add ability to customize Info.plist iOS: Add support for fonts
2 participants