Font tùy chỉnh trong Flow Builder

Khi tạo flow, bạn có thể muốn dùng font tùy chỉnh để phù hợp với phần còn lại của ứng dụng. Dưới đây là cách thêm font tùy chỉnh và sử dụng chúng trong flow của bạn.

Cấu hình font trong panel Styles trước khi bắt đầu thiết kế flow. Như vậy, mọi thay đổi bạn thực hiện sẽ được áp dụng toàn cục.

Font tích hợp sẵn

Khi bạn tạo một flow trong Builder, Adapty sử dụng font hệ thống theo mặc định. Thông thường là SF Pro trên iOS và Roboto trên Android, mặc dù có thể khác nhau tùy theo thiết bị. Bạn cũng có thể chọn từ các font phổ biến như Arial, Times New Roman, Courier New, Georgia và Helvetica. Mỗi font trong số này đi kèm với một vài tùy chọn kiểu chữ. Các font chữ này không được cung cấp kèm theo Adapty SDK và chỉ được sử dụng cho mục đích xem trước. Chúng tôi không thể đảm bảo chúng sẽ hoạt động hoàn hảo trên mọi thiết bị. Tuy nhiên, qua quá trình kiểm thử, các font này thường được hầu hết thiết bị nhận dạng mà không cần bạn thực hiện thêm bất kỳ thao tác nào. Bạn cũng có thể xem danh sách các font có sẵn theo mặc định trên iOS.

Thêm font chữ tùy chỉnh

File bạn tải lên chỉ dùng để xem trước trong editor — Adapty không đẩy file đó xuống thiết bị của người dùng. Để hiển thị font trên thiết bị, hãy thêm file vào bundle của ứng dụng. Nếu không có file đó, SDK sẽ tự động dùng SF Pro (iOS) hoặc Roboto (Android) khi chạy thực tế.

Nếu bạn muốn dùng font khác ngoài font mặc định của hệ thống, bạn có thể thêm font tùy chỉnh.

Để thêm font tùy chỉnh: 0. Nếu font là variable font, hãy tách nó thành các file đơn style với tên riêng biệt. Các điều chỉnh về weight, bold và italic không áp dụng cho font tùy chỉnh. Adapty chỉ đăng ký một style cho mỗi file font tùy chỉnh. Để định dạng văn bản, hãy chuyển sang biến thể font phù hợp.

Chọn Upload new font trong bất kỳ dropdown font nào.

Trong cửa sổ Add custom font, điền vào các trường sau:

Tên Font name in Builder, iOS font name, và Android font name phải là duy nhất trong tất cả các file font tùy chỉnh trong ứng dụng.

Font name in Builder: Nhập tên hiển thị cho font. Tên này sẽ xuất hiện trong các dropdown chọn font trong Builder.
- iOS font name: Nhập tên PostScript của font. Bạn có thể tìm thấy nó trong Font Book → PostScript name, hoặc thông qua UIFont API.
- Android font name: Nhập tên file từ res/font/. Chỉ dùng chữ thường, số và dấu gạch dưới.
- Font file: Kéo và thả file font vào hoặc nhấn Select files. Định dạng hỗ trợ: .ttf, .otf, .woff, .woff2.

Nhấn Save font.

Bằng cách tải tệp phông chữ lên Adapty, bạn xác nhận rằng bạn có quyền sử dụng nó trong ứng dụng của mình.

Xóa font chữ tùy chỉnh

Xóa font chữ tùy chỉnh khỏi dashboard sẽ tự động thay thế mọi tham chiếu đến font đó bằng font hệ thống trong tất cả các flow đang ở trạng thái nháp lẫn đã xuất bản. Không có cảnh báo nào được hiển thị và bạn không thể hoàn tác thao tác này. Trước khi xóa, hãy xác nhận rằng không có flow nào đang hoạt động đang dùng font đó.

Phông chữ tùy chỉnh trong các mẫu flow

Thư viện mẫu flow bao gồm các mẫu có phông chữ tùy chỉnh. Di chuột qua chip Custom font trên thẻ mẫu để xem mẫu đó sử dụng những phông chữ nào.

Adapty không đính kèm sẵn các phông chữ này. Bạn cần tự tìm nguồn phông chữ, khớp với tên phông được hiển thị trong chip. Một số phông chữ có thể yêu cầu giấy phép thương mại.

Sau khi có file phông chữ, hãy làm theo các bước đóng gói bên dưới.

Thêm file font vào bundle của ứng dụng

Nếu bạn đã sử dụng font tùy chỉnh ở nơi khác trong ứng dụng, bạn chỉ cần thêm font cho paywall theo cách tương tự. Nếu chưa, hãy đảm bảo đưa file font vào project và bundle của ứng dụng. Xem hướng dẫn bên dưới:

Trên iOS: Trong tài liệu chính thức của Apple
Trên Android: Trong tài liệu chính thức của Android