Custom mapping of fonts not applying to heading category (h1-h6)

[jgudo]

💬 Question

Custom mapping of fonts are not applying to only heading categories (h1-h6). I'm not sure whether this is a misconfiguration on my custom mapping. Could you help me out on this configuration? I'm having hard time trying to wrap my ahead round custom mappings documentation.

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.1.0
@ui-kitten/components	5.1.2

This is what my mapping.json file looks like:

{
    "strict": {
        "text-font-family": "SFPro-Regular",
        "text-heading-1-font-size": 36,
        "text-heading-1-font-family": "ProductSans-Bold",
        "text-heading-2-font-family": "ProductSans-Bold",
        "text-heading-3-font-family": "ProductSans-Bold",
        "text-heading-4-font-family": "ProductSans-Bold",
        "text-heading-5-font-family": "ProductSans-Bold",
        "text-heading-6-font-family": "ProductSans-Bold",
        "text-subtitle-1-font-size": 15,
        "text-subtitle-1-font-weight": "600",
        "text-subtitle-1-font-family": "ProductSans-Medium",
        "text-subtitle-2-font-family": "ProductSans-Medium",
        "text-paragraph-1-font-size": 15,
        "text-paragraph-1-font-weight": "400",
        "text-paragraph-1-font-family": "SFPro-Regular",
        "text-caption-1-font-size": 12,
        "text-caption-1-font-weight": "400",
        "text-caption-1-font-family": "ProductSans-Medium",
        "text-label-font-size": 12,
        "text-label-font-weight": "800",
        "text-label-font-family": "ProductSans-Regular"
    },
    "components": {
        "Text": {
            "meta": {
                "scope": "all",
                "parameters": {
                    "fontFamily": {
                        "type": "string"
                    },
                    "fontSize": {
                        "type": "number"
                    },
                    "marginLeft": {
                        "type": "number"
                    }
                },
                "variantGroups": {
                    "category": {
                        "n1": {
                            "default": false
                        }
                    }
                }
            },
            "appearances": {
                "default": {
                    "variantGroups": {
                        "category": {
                            "h1": {
                                "fontFamily": "text-heading-1-font-family"
                            },
                            "h2": {
                                "fontFamily": "text-heading-2-font-family"
                            },
                            "h3": {
                                "fontFamily": "text-heading-3-font-family"
                            },
                            "h4": {
                                "fontFamily": "text-heading-4-font-family"
                            },
                            "h5": {
                                "fontFamily": "text-heading-5-font-family"
                            },
                            "h6": {
                                "fontFamily": "text-heading-6-font-family"
                            },
                            "s1": {
                                "fontFamily": "text-subtitle-1-font-family"
                            },
                            "s2": {
                                "fontFamily": "text-subtitle-2-font-family"
                            },
                            "p1": {
                                "fontFamily": "text-paragraph-1-font-family"
                            },
                            "p2": {
                                "fontFamily": "text-paragraph-2-font-family"
                            },
                            "c1": {
                                "fontFamily": "text-caption-1-font-family"
                            },
                            "c2": {
                                "fontFamily": "text-caption-2-font-family"
                            },
                            "label": {
                                "fontFamily": "text-label-font-family",
                                "marginLeft": 10
                            },
                            "n1": {
                                "fontFamily": "ProductSans-Regular",
                                "fontSize": 15
                            }
                        }
                    }
                }
            }
        }
    }
}

When I use the Text component and use certain category, only heading categories do not apply the custom font while other categories works.

<Text category='p1' style={{ fontSize: 30 }}>SFPro- The quick brown fox jumps over the lazy dog</Text>
    <Text category='n1' style={{ fontSize: 30 }}>ProductSans - The quick brown fox jumps over the lazy dog {'\n'}</Text>
    <Text category='h1'>Heading 1</Text>

To give you a snapshot of the issue, this is what is looks like when I run it on my device:

As you can see, all the heading categories are not using the custom font from the mapping and only uses the System font in this case which is SamsungOne font that is currently set on my device. I am using SFPro font and ProductSans font. I have tried different fonts but problem still exists.

[jgudo]

Finally found the solution. Turns out, I must specify the fontWeight of the category

"appearances": {
      "default": {
            "variantGroups": {
                 "category": {
                     "h1": {
                          "fontFamily": "ProductSans-Bold",
                          "fontWeight": "600"
                        }
                        ...
                    }
                 }
        }
}

[isaachinman]

@jgudo How did you discover the correct format for custom mapping? Are there TypeScript definitions, or a schema somewhere?

[jgudo]

@isaachinman You can look up at the main mapping source file in node_modules/@eva-design/eva/mapping.json

From there you can copy-paste the component mapping you would like to modify.