microsoft / microsoft/react-native-windows
Add FontFamily registration system
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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