fix: make useResolvedFontFamily consistent with documented setup for custom fonts

[kevindice]

Summary

This PR fixes an inconsistency between useResolvedFontFamily and the documentation & examples.

To use a custom font, the documentation suggests that a property needs to be added to theme.fontConfig mapping all the font weights and styles to specific font files.

The useResolvedFontFamily implementation, however, on line 23, suggests that a property also needs to be added to theme.fonts which is inconsistent with the documentation.

As documented, if I wanted to add SF Pro Display as a custom font, I would do:

const fonts = {
  heading: 'SF Pro Display',
  body: 'SF Pro Display',
  monospace: undefined,
}

const fontConfig = {
  'SF Pro Display': {
    400: {
      normal: 'SF Pro Display Regular',
      itallc: 'SF Pro Display Regular Italic',
    },
    ....
  }
}

const theme = extendTheme({
  fonts,
  fontConfig,
});

But nowhere does it suggest I need to update fonts, adding a property with SF Pro Display as a key. Unless I were to do that, line 23 of useResolvedFontFamily always evaluates to false and this hook never properly does its job to map fonts to the correct value for Android and iOS.

Changelog

General Fixed - Correct an inconsistency between useResolvedFontFamily and the documentation for using custom fonts

Test Plan

[vercel[bot]]

@kevindice is attempting to deploy a commit to the Geekyants Team Team on Vercel.

A member of the Team first needs to authorize it.