microsoft / microsoft/react-native-windows

Add FontFamily registration system

Open
#3,816 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Text enhancement Needs: PM Design Partner: Xbox Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Proposal: Add FontFamily registration system

Summary

On UWP, custom fonts are referenced with a string like "/Path/to/font.ttf#Font name" where the path is relative to the app's install path. This is problematic for a few reasons, listed below.

Request: Allow developers to configure a mapping of Font Name to "path#Name" string as part of React Native Windows initialization. When a fontFamily style is set, look up and, if available, use the value from the map when constructing the XAML FontFamily instance.

Motivation

On iOS, custom fonts added to an RN app can be referenced by their name. On Android, they can be referenced by the file name without the extension, which can typically be made to match the font name. This allows components that use the fontFamily style to be fairly portable.

On UWP, custom fonts are referenced with a string like "/Path/to/font#Font name". This string does not match iOS or Android, and is unique to the consuming application's folder structure, making it non-portable.

An app might workaround this by replacing fontFamily usages within its codebase with a helper function to generate the correct string. Shared component library authors with default font styles might add helper functions or a registration system themselves. Either case invites unique implementations rather than consistency across the platform. Building a solution into RNW directly would alleviate this problem.

Basic example

#include <ReactUWP/Utils/ValueUtils.h>

map<string, string> fontAliases = { { "MyFont", "/Assets/MyFont.ttf#MyFont" } };
react::uwp::SetFontFamilyPaths(fontAliases);
const textStyle = {
    fontFamily: "MyFont"
};

render() {
    return <Text style={textStyle} />;
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The proposal names ReactUWP/Utils/ValueUtils.h and SetFontFamilyPaths as the public entry point; start there and trace how the fontFamily style becomes a XAML FontFamily. Done means a mapping can be configured during React Native Windows initialization and aliases resolve to the supplied path#name string while ordinary fontFamily values still work. The issue does not name tests to run.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp, react-native
Domain
desktop
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.