How to include Roboto font in webpack build for Material UI?

后端 未结 5 561
眼角桃花
眼角桃花 2021-01-30 03:45

For a progressive web app based on Material UI (React) and built with Webpack, how do I properly include Roboto font(s) so that the app does not depend

5条回答
  •  故里飘歌
    2021-01-30 04:48

    In case the application was started with create-react-app, it doesn't have a [visible] webpack configfile. In this case you can do the following:

    1. create /fonts directory in /public
    2. create /public/fonts/fonts.css, that defines the @font-faces

      @font-face { font-family: 'inglobal'; font-weight: normal; font-style: normal; src: url('./OperatorMono.ttf'); }

    3. Copy font files

    4. add to /public/index.html's

    5. Hurray!

    5/b. If, for any reason, it still doesn't work, change the fonts' extensions to .css (also at src: url('./OperatorMono.css') )

自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题