[Typography] Add a custom, self-hosted font demo #14928

johnrichter · 2019-03-17T22:22:14Z

I read the results of the Material UI survey this weekend and saw that a custom typography demo was asked for. Since I had recently added Roboto as a self-hosted font to my web app I figured I'd pull that out and make a demo of it using Raleway instead.

Since I wanted to reuse the main Typography demo, I converted it to Typescript and Hooks.

yarn typescript passes
yarn docs:typescript:formatted passes
yarn prettier was run, but produced some odd formatting (extreme amounts of indenting) so I manually corrected that after running it.
yarn lint TBD. Has issue loading font files. See both errors below.

± yarn lint
yarn run v1.15.2
$ eslint . --cache --report-unused-disable-directives

/Users/john/Development/opensource/material-ui/material-ui/docs/src/pages/style/typography/TypographyFontFamily.js
  4:31  error  Unable to resolve path to module '@material-ui/docs/src/pages/style/typography/fonts/Raleway-Light.woff2'    import/no-unresolved
  5:29  error  Unable to resolve path to module '@material-ui/docs/src/pages/style/typography/fonts/Raleway-Light.ttf'      import/no-unresolved
  6:33  error  Unable to resolve path to module '@material-ui/docs/src/pages/style/typography/fonts/Raleway-Regular.woff2'  import/no-unresolved
  7:31  error  Unable to resolve path to module '@material-ui/docs/src/pages/style/typography/fonts/Raleway-Regular.ttf'    import/no-unresolved
  8:32  error  Unable to resolve path to module '@material-ui/docs/src/pages/style/typography/fonts/Raleway-Medium.woff2'   import/no-unresolved
  9:30  error  Unable to resolve path to module '@material-ui/docs/src/pages/style/typography/fonts/Raleway-Medium.ttf'     import/no-unresolved

I am having trouble building the documentation website to see if the demo works properly because there isn't a babel plugin or loader configured to load .woff2 or .ttf files. Would love some guidance as I normally lean on CRA heavily and don't know my way around Babel or its plugins.

Docs Page: http://127.0.0.1:3000/style/typography

./docs/src/pages/style/typography/TypographyFontFamily.js
Module not found: Can't resolve '../../../../../packages/material-ui-docs/src/src/pages/style/typography/fonts/Raleway-Light.ttf' in '/Users/john/Development/opensource/material-ui/material-ui/docs/src/pages/style/typography'
ModuleNotFoundError: Module not found: Error: Can't resolve '../../../../../packages/material-ui-docs/src/src/pages/style/typography/fonts/Raleway-Light.ttf' in '/Users/john/Development/opensource/material-ui/material-ui/docs/src/pages/style/typography'
    at factory.create (/Users/john/Development/opensource/material-ui/material-ui/node_modules/next/node_modules/webpack/lib/Compilation.js:823:10)
    at factory (/Users/john/Development/opensource/material-ui/material-ui/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users/john/Development/opensource/material-ui/material-ui/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/john/Development/opensource/material-ui/material-ui/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/john/Development/opensource/material-ui/material-ui/node_modules/neo-async/async.js:2825:7
    at /Users/john/Development/opensource/material-ui/material-ui/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/Users/john/Development/opensource/material-ui/material-ui/node_modules/next/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/Users/john/Development/opensource/material-ui/material-ui/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/Users/john/Development/opensource/material-ui/material-ui/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/john/Development/opensource/material-ui/material-ui/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (/Users/john/Development/opensource/material-ui/material-ui/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/Users/john/Development/opensource/material-ui/material-ui/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/john/Development/opensource/material-ui/material-ui/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (/Users/john/Development/opensource/material-ui/material-ui/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/john/Development/opensource/material-ui/material-ui/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/Users/john/Development/opensource/material-ui/material-ui/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)

I could just switch this to use Google's CDN as I mention in the code comments and then write a detailed comment in the block at the top on how you'd self-host. I'm open to w/e is easier or better for everyone.

I'm also not sure if you'd like to use LFS for the binary font files, but that could easily be done as well.

I have followed (at least) the PR section of the contributing guide.

oliviertassinari

Thanks for looking into it.

docs/src/pages/style/typography/Types.js

docs/src/pages/style/typography/Types.tsx

docs/src/pages/style/typography/typography.md

docs/src/pages/style/typography/TypographyFontFamily.js

docs/src/pages/style/typography/typography.md

mbrookes · 2019-03-18T15:05:25Z

I don't think that we should add a demo for it. I would rather keep it simple cc @mbrookes.

Yes, that's pretty much what I said yesterday in chat. The only reference to fonts in the survey is WRT using @mdi/font with <i> not being the correct size. Not really a Material-UI issue.

It perhaps got mistranslated to "Theme: Non-material font example", which got misinterpreted as "self hosted font demo", and here we are.

johnrichter · 2019-03-18T16:34:26Z

Well, at the very least this PR, merged or closed, can serve as documentation for any future users 😆

Add a custom, self-hosted font typography demo.

…atted. Remove unnecesary imports from self-hosted font demo.

Update font family theme customization docs to include information on using fonts via overrides.

…deleted.

mui-pr-bot · 2019-03-18T18:59:28Z

No bundle size changes comparing 10438a1...52d155d

Generated by 🚫 dangerJS against 52d155d

mbrookes · 2019-03-18T19:28:08Z

docs/src/pages/customization/themes/themes.md

@@ -216,13 +216,62 @@ If you want to learn more about typography, you can check out [the typography se

 {{"demo": "pages/customization/themes/TypographyTheme.js"}}

-#### Typography - Font family
+### Typography - Font family


I don't believe we repeat the heading from the level above like this elsewhere in the docs. Would this be a good opportunity remove it, or is the extra clarity needed here for some reason? cc: @oliviertassinari

Great idea.

@johnrichter what do you think? Do you want to change the headers?

I agree. Certainly. One moment

Ready to go 👍

mbrookes · 2019-03-18T19:57:15Z

@johnrichter That turned out to be a worthwhile exercise, despite the initial misunderstanding. Thanks for working on it! 👍

johnrichter · 2019-03-18T20:03:55Z

You're welcome. I'm glad I could help! I want to find more time to contribute so you'll probably see more PRs from me in the future. I've been going from zero to hero using MUI solely in TS and could probably submit some fixes or quality of life changes as I run into them.

mbrookes · 2019-03-18T21:17:11Z

That would be great! PRs that make getting started easier are always welcome. If they're small things, you could always keep a note of them and batch them.

oliviertassinari · 2019-03-18T23:45:32Z

@johnrichter It's a great first pull request on Material-UI 👌🏻. Thank you for working on it!

oliviertassinari reviewed Mar 18, 2019

View reviewed changes

oliviertassinari requested a review from mbrookes March 18, 2019 10:20

johnrichter and others added 7 commits March 18, 2019 19:38

Add Typography typescript demo.

adedcbb

Add a custom, self-hosted font typography demo.

Formatting changes required by the contributing guidelines.

80749a0

Revert Markdown formatting changes introduced by docs:typescript:form…

8edc3bb

…atted. Remove unnecesary imports from self-hosted font demo.

Remove font family demos from style/typography docs.

08702f2

Update font family theme customization docs to include information on using fonts via overrides.

Grammatical changes to docs

94bb1be

Remove binary font files now that the self hosted font demo has been …

06c78a2

…deleted.

split into a different demo

2339201

oliviertassinari force-pushed the Custom-Font-Example branch from 6909a8a to 2339201 Compare March 18, 2019 18:54

oliviertassinari approved these changes Mar 18, 2019

View reviewed changes

oliviertassinari added docs Improvements or additions to the documentation PR: good for merge typescript component: Typography The React component. labels Mar 18, 2019

mbrookes reviewed Mar 18, 2019

View reviewed changes

Remove redundant header naming

52d155d

mbrookes approved these changes Mar 18, 2019

View reviewed changes

oliviertassinari merged commit 395d925 into mui:next Mar 18, 2019

johnrichter deleted the Custom-Font-Example branch March 19, 2019 13:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Typography] Add a custom, self-hosted font demo #14928

[Typography] Add a custom, self-hosted font demo #14928

johnrichter commented Mar 17, 2019 •

edited

Loading

oliviertassinari left a comment

mbrookes commented Mar 18, 2019 •

edited

Loading

johnrichter commented Mar 18, 2019

mui-pr-bot commented Mar 18, 2019 •

edited

Loading

mbrookes Mar 18, 2019

oliviertassinari Mar 18, 2019

oliviertassinari Mar 18, 2019

johnrichter Mar 18, 2019

johnrichter Mar 18, 2019

mbrookes commented Mar 18, 2019

johnrichter commented Mar 18, 2019

mbrookes commented Mar 18, 2019

oliviertassinari commented Mar 18, 2019

[Typography] Add a custom, self-hosted font demo #14928

[Typography] Add a custom, self-hosted font demo #14928

Conversation

johnrichter commented Mar 17, 2019 • edited Loading

oliviertassinari left a comment

Choose a reason for hiding this comment

mbrookes commented Mar 18, 2019 • edited Loading

johnrichter commented Mar 18, 2019

mui-pr-bot commented Mar 18, 2019 • edited Loading

mbrookes Mar 18, 2019

Choose a reason for hiding this comment

oliviertassinari Mar 18, 2019

Choose a reason for hiding this comment

oliviertassinari Mar 18, 2019

Choose a reason for hiding this comment

johnrichter Mar 18, 2019

Choose a reason for hiding this comment

johnrichter Mar 18, 2019

Choose a reason for hiding this comment

mbrookes commented Mar 18, 2019

johnrichter commented Mar 18, 2019

mbrookes commented Mar 18, 2019

oliviertassinari commented Mar 18, 2019

johnrichter commented Mar 17, 2019 •

edited

Loading

mbrookes commented Mar 18, 2019 •

edited

Loading

mui-pr-bot commented Mar 18, 2019 •

edited

Loading