Customize Font

The font used in the theme can be customized using the theme. The following sections describe how to customize the font.

info

In-order to change the font in the other areas of the app were the font is not controlled by the theme, you can use the custom fonts extension. Refer this for more details.

Preparing Font Files

1. Font Files: Obtain the required font files from your font provider.

2. File Format: Ensure that the font files are in .ttf format. The file extension is case-sensitive and should be in lowercase.

3. Font Name Consistency: The font file name must match the font's full name. Verify this by checking the font information on your system. If the names do not match, rename the font file accordingly.

4. Using Font Renamer:

   • Upload: Upload the font files to font-renamer. This tool renames the files based on their internal names.
   • Download: Retrieve the renamed font files either individually or as a zip file.
   • Utilize: Use these renamed font files in your theme.
   • Update Theme Configuration: Font Renamer also generates a JSON mapping to prevent font name conflicts in React Native builds. If using renamed font files, update the appmaker-theme.json file with the JSON provided by Font Renamer. Adjust key names to regular, medium, bold as needed.

Adding Custom Fonts to the Theme

1. Create Fonts Directory: Create a fonts folder within the src/assets directory.

2. Add Font Files: Place your font files into the newly created fonts folder.

   <theme-id>
   ├── src
   │   ├── assets
   │       ├── fonts
   │           ├── SF-Pro-Display-Regular.ttf
   │           ├── SF-Pro-Display-Medium.ttf
   │           └── SF-Pro-Display-Bold.ttf
   └── appmaker-theme.json

3. Update Configuration: Create or update the appmaker-theme.json file in the root folder with the relevant font details.

   src/appmaker-theme.json

   {
     "fontFamily": {
       "regular": "SF-Pro-Display-Regular",
       "medium": "SF-Pro-Display-Medium",
       "bold": "SF-Pro-Display-Bold"
     }
   }

caution

The font name should match the font file name without the extension.

Using the ThemeText Component

The ThemeText component is a custom text component that leverages the theme's font family. Use this component instead of the default Text component to ensure the theme's font is applied. Regular, medium, and bold names defined in custom font extension are used to apply the font family.

Example:

SampleComponent.js

import { ThemeText } from "@appmaker-xyz/ui";

const SampleComponent = () => {
  return (
    <ThemeText size="md" fontFamily="bold">
      Custom Font
    </ThemeText>
  );
};

export default SampleComponent;

ThemeText Props

Text props

The ThemeText component inherits all the props from the Text component. Additionally, it offers the following props:

Prop	Type	Default	Description
style	object	{}	Style object to apply additional styles to the text component.
children	node		Text content to display.
size	string	base	Font size variant. Possible values: xs, 10, sm, base,md, lg, xl, 2xl, 3xl, 4xl.
fontFamily	string	regular	Font weight variant. Possible values: regular, medium, bold. This apply font names you have added in custom-font extension or default font family.
color	string	'#000000'	Text color.
striptags	bool	false	Strip HTML tags from the text content.
hideText	bool	false	Conditionally hide the text content.
html	bool	false	Render text content as HTML. Note: The above properties may not work if this is enabled.
customHtmlTagsStyles	object	{}	Custom styles for HTML tags. Format: { tag: { style: { key: value } } }

Size guide for size prop:

Size	Value
xs	8
10	10
sm	12
base	14
md	16
lg	18
xl	24
2xl	28
3xl	32
4xl	36

Using additional fonts families other than regular, medium, and bold

Add and use custom fonts in your project by placing font files in the src/assets/fonts directory, updating the appmaker-theme.json file, defining the fonts in src/styles/index.js, and applying them using the ThemeText or Text component with styles as shown below.

Additional Fonts (Steps)

1. To use a font other than regular, medium, and bold, you can follow above steps and add as many fonts as per your requirement to the src/assets/fonts directory. Then, update the appmaker-theme.json file with the new font family.

   src/appmaker-theme.json

   {
     "fontFamily": {
       "regular": "SF-Pro-Display-Regular",
       "medium": "SF-Pro-Display-Medium",
       "bold": "SF-Pro-Display-Bold",
       "custom": "Custom-Font" // Add the custom font. This is for app build purpose
     }
   }

2. Create a styles index file to define the custom font family in src/styles/index.js.

   src/styles/index.js

   const additionalFonts = {
     custom: "Custom-Font", // Add the custom font. Use this for styling
   };
   
   export { additionalFonts };

3. Now, you can use the ThemeText or Text component to apply the custom font in the styles.

   SampleComponent.js

   import { ThemeText } from "@appmaker-xyz/ui";
   import { StyleSheet } from "react-native";
   import { additionalFonts } from "../styles"; // Import the styles index file
   
   const SampleComponent = () => {
     return (
       <ThemeText size="md" style={styles.text}>
         Custom Font
       </ThemeText>
     );
   };
   
   const styles = StyleSheet.create({
     text: {
       fontFamily: additionalFonts.custom, // Apply the custom font
     },
   });
   
   export default SampleComponent;

info

You can apply a custom fontSize using the style prop. The size prop is specifically for predefined font sizes.

caution

Using a custom fontWeight in the style prop will override the fontFamily prop. Therefore, it is recommended to avoid setting fontWeight in the style prop.