Docz: Default Fonts Not Loading Correctly

[mattfwood]

Bug Report

Describe the bug

When setting up a project as described in "Getting Started", both the main and fallback font aren't loaded correctly:

I was initially planning to dig into this and open a pull request myself, but when I forked the repo I couldn't find any instance of "Source Sans Pro" or even "sans-serif".

So I was able to trace it down to this typography theme in this library:

https://github.com/KyleAMathews/typography.js/blob/49363c455d931f2fceaf7b7594c2c5159c1dc416/packages/typography-theme-moraga/src/index.js#L18

However when I try to load this font in just a basic create-react-app project, it loads as expected.

So here are the two things happening:

1. The "Source Sans Pro" font is not being loaded in at any point in the docz project
2. When "Source Sans Pro" fails to load, the fallback is written as "sans-serif", but this doesn't properly load a sans-serif fallback font because the quotes cause it to look for a font literally called "san-serif" and not a font in that family.

I'd be glad to keep looking into this but I'm not really sure where to look next.

To Reproduce

1. Create a new docz v2 project using the "Getting Started" guide
2. Create a .mdx file in the project
3. Start docz dev server
4. Check font on left menu

Reproduction Repo:

https://codesandbox.io/s/quirky-monad-rfrd5?fontsize=14

[MattiaVorstenbosch]

I'm experiencing this aswell, Indeed both the "Source Sans Pro" is nowhere to be found and the fallback in quotes is wrong too. Should just be: sans-serif.

Aside from default fonts not loading. How would one go about implementing a custom font ? Any ideas? thanks!

[mattfwood]

@MattiaVorstenbosch for implementing a custom font (which was also my workaround for this bug), i ended up just following this guide to use the Gatsby theme and then included the font in the gatsby-config.js file:

https://www.docz.site/docs/gatsby-theme

[stolinski]

I'm also seeing the default font's not loading correctly. They are loading as serif. I have not modified theme.

[pedronauck]

Hi guys, sorry the too late response, I was on vacation so I couldn't see any issues until now. I'll try to figure out this and fix in order to launch in the stable v2 🙏

[daphnesmit]

Maybe this helps:
I inspected the console and it trows an error linking to .docz/node_modules/react-error-overlay/lib/index.js

index.js:2177 Warning: Invalid prop css supplied to React.Fragment. React.Fragment can only have key and children props.
in Fragment (at Sidebar/index.js:21)
in ForwardRef (at Layout/index.js:29)
in div (created by Context.Consumer)
in EmotionCssPropInternal (at Layout/index.js:28)
in main (created by Context.Consumer)
in EmotionCssPropInternal (created by ForwardRef)
in ForwardRef (created by Context.Consumer)
in EmotionCssPropInternal (created by Main)
in Main (created by Context.Consumer)
in EmotionCssPropInternal (at Layout/index.js:26)
in div (created by Context.Consumer)
in EmotionCssPropInternal (created by ForwardRef)
in ForwardRef (created by Context.Consumer)
in EmotionCssPropInternal (created by Layout)
in Layout (created by Context.Consumer)
in EmotionCssPropInternal (at Layout/index.js:24)
in Layout (at Layout.js:22)
in Wrapper (at Layout.js:21)
in a (at Layout.js:20)
in Route (at Layout.js:45)
in div (created by Context.Consumer)
in EmotionCssPropInternal (created by ForwardRef)
in ForwardRef (at src/index.js:14)
in ComponentsProvider (at src/index.js:13)
in a (created by BaseProvider)
in BaseProvider (created by RootProvider)
in RootProvider (created by ThemeProvider)
in ThemeProvider (at src/index.js:12)
in Theme
in DoczStateProvider
in Unknown (at Layout.js:44)
in Layout (created by MDXCreateElement)
in MDXCreateElement (at intro.mdx:22)
in MDXContent (created by HotExportedMDXContent)
in AppContainer (created by HotExportedMDXContent)
in HotExportedMDXContent (created by PageRenderer)
in PageRenderer (at json-store.js:93)
in JSONStore (at root.js:51)
in RouteHandler (at root.js:73)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by EnsureResources)
in ScrollContext (at root.js:64)
in RouteUpdates (at root.js:63)
in EnsureResources (at root.js:61)
in LocationHandler (at root.js:119)
in LocationProvider (created by Context.Consumer)
in Location (at root.js:118)
in Root (at root.js:126)
in a (at wrap-root-element.js:63)
in MDXScopeProvider (at wrap-root-element.js:62)
in Unknown
in Unknown (at wrap-root-element.js:70)
in _default (at app.js:65)

[klaytonfaria]

Maybe this helps:
I inspected the console and it trows an error linking to .docz/node_modules/react-error-overlay/lib/index.js

index.js:2177 Warning: Invalid prop css supplied to React.Fragment. React.Fragment can only have key and children props.
in Fragment (at Sidebar/index.js:21)
in ForwardRef (at Layout/index.js:29)
in div (created by Context.Consumer)
in EmotionCssPropInternal (at Layout/index.js:28)
in main (created by Context.Consumer)
in EmotionCssPropInternal (created by ForwardRef)
in ForwardRef (created by Context.Consumer)
in EmotionCssPropInternal (created by Main)
in Main (created by Context.Consumer)
in EmotionCssPropInternal (at Layout/index.js:26)
in div (created by Context.Consumer)
in EmotionCssPropInternal (created by ForwardRef)
in ForwardRef (created by Context.Consumer)
in EmotionCssPropInternal (created by Layout)
in Layout (created by Context.Consumer)
in EmotionCssPropInternal (at Layout/index.js:24)
in Layout (at Layout.js:22)
in Wrapper (at Layout.js:21)
in a (at Layout.js:20)
in Route (at Layout.js:45)
in div (created by Context.Consumer)
in EmotionCssPropInternal (created by ForwardRef)
in ForwardRef (at src/index.js:14)
in ComponentsProvider (at src/index.js:13)
in a (created by BaseProvider)
in BaseProvider (created by RootProvider)
in RootProvider (created by ThemeProvider)
in ThemeProvider (at src/index.js:12)
in Theme
in DoczStateProvider
in Unknown (at Layout.js:44)
in Layout (created by MDXCreateElement)
in MDXCreateElement (at intro.mdx:22)
in MDXContent (created by HotExportedMDXContent)
in AppContainer (created by HotExportedMDXContent)
in HotExportedMDXContent (created by PageRenderer)
in PageRenderer (at json-store.js:93)
in JSONStore (at root.js:51)
in RouteHandler (at root.js:73)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by EnsureResources)
in ScrollContext (at root.js:64)
in RouteUpdates (at root.js:63)
in EnsureResources (at root.js:61)
in LocationHandler (at root.js:119)
in LocationProvider (created by Context.Consumer)
in Location (at root.js:118)
in Root (at root.js:126)
in a (at wrap-root-element.js:63)
in MDXScopeProvider (at wrap-root-element.js:62)
in Unknown
in Unknown (at wrap-root-element.js:70)
in _default (at app.js:65)

Hello @daphnesmit , This error isn't related to the font loading.

[klaytonfaria]

@daphnesmit, The error regarding css property was fixed with PR #992

[jesperorb]

Appears that a fix has been merged and is fixed in the existing RC, closing this issue. I can reopen if the author still encounters the error.