Add support for defining fonts in the theme

CHANGELOG.md

@@ -7,6 +7,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## Next
 
+- Add support for defining fonts in the theme. [#232](https://github.com/Shopify/restyle/pull/232) by [ergenekonyigit](https://github.com/ergenekonyigit) & [gokselpirnal](https://github.com/gokselpirnal)
 - Fixed: clean up the project configuration for RN0.71, aligning some packages to the right version [#271](https://github.com/Shopify/restyle/pull/271) by [kelset](https://github.com/kelset) & [tido64](https://github.com/tido64)
 
 ## 2.4.2 - 2023-03-30
@@ -27,6 +28,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 - Renamed gap shorthands to be lowercase [#218](https://github.com/Shopify/restyle/pull/218) by [mlecoq](https://github.com/mlecoq)
 - Better TypeScript type support [#216](https://github.com/Shopify/restyle/pull/216) by [FranzMoreno](https://github.com/FranzMoreno) & [fortmarek](https://github.com/fortmarek)
 
+
 ## 2.2.0 - 2023-01-24
 
 - Upgrade React Native to 0.71 in [#207](https://github.com/Shopify/restyle/pull/207) by [mattfrances](https://github.com/mattfrances)

documentation/docs/fundamentals/restyle-functions.md

@@ -26,7 +26,8 @@ The Restyle library comes with a number of predefined Restyle functions for your
 | shadow           | shadowColor                                                                                                                                                                                                                                                                                                                                                                  | colors      |
 | textShadow       | textShadowOffset, textShadowRadius                                                                                                                                                                                                                                                                                                                                           | _none_      |
 | textShadow       | textShadowColor                                                                                                                                                                                                                                                                                                                                                              | colors      |
-| typography       | fontFamily, fontSize, fontStyle, fontWeight, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirection                                                                                                                          | _none_      |
+| typography       | fontSize, fontStyle, fontWeight, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirection                                                                                                                                      | _none_      |
+| typography       | fontFamily                                                                                                                                                                                                                                                                                                                                                                   | fonts       |
 
 ## Custom Restyle functions
 

documentation/docs/guides/dark-mode.md

@@ -37,6 +37,8 @@ const theme = createTheme({
     primaryCardText: palette.white,
     secondaryCardText: palette.black,
   },
+  breakpoints: {},
+  fonts: {},
   textVariants: {
     defaults: {},
     body: {

src/restyleFunctions.ts

@@ -53,7 +53,6 @@ const spacingPropertiesShorthand = {
 };
 
 const typographyProperties = {
-  fontFamily: true,
   fontSize: true,
   fontStyle: true,
   fontWeight: true,
@@ -199,11 +198,17 @@ export const spacingShorthand = getKeys(spacingPropertiesShorthand).map(
   },
 );
 
-export const typography = getKeys(typographyProperties).map(property => {
-  return createRestyleFunction({
-    property,
-  });
-});
+export const typography = [
+  ...getKeys(typographyProperties).map(property => {
+    return createRestyleFunction({
+      property,
+    });
+  }),
+  createRestyleFunction({
+    property: 'fontFamily',
+    themeKey: 'fonts',
+  }),
+];
 
 export const layout = getKeys(layoutProperties).map(property => {
   return createRestyleFunction({
@@ -327,6 +332,11 @@ export type TypographyProps<Theme extends BaseTheme> = {
     TextStyle[Key],
     Theme['breakpoints']
   >;
+} & {
+  fontFamily?: ResponsiveValue<
+    Theme['fonts'] extends object ? keyof Theme['fonts'] : string,
+    Theme['breakpoints']
+  >;
 };
 
 export type LayoutProps<Theme extends BaseTheme> = {

src/types.ts

@@ -44,6 +44,9 @@ export interface KnownBaseTheme {
   zIndices?: {
     [key: string]: number;
   };
+  fonts?: {
+    [key: string]: string;
+  };
   borderRadii?: {
     [key: string]: number;
   };