microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.24k stars 1.13k forks source link

Add FontFamily registration system #3816

Open aschultz opened 4 years ago

aschultz commented 4 years ago

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} />;
}
chrisglein commented 4 years ago

@kikisaints can you evaluate this proposal? (note it has a PR prepped with the proposed design) @ddalp as a FYI, as our resident text expert