How to async load Material ui fonts?

I use Material-UI and its fonts block render of the first page. By default, if I don't load any fonts, materialui use Helvetica font. And the main idea is to use it until Roboto will be downloaded.

/signup (localhost)
    …media/roboto-latin-500.4b218fc7.woff2 (localhost) - 763,7ms, 14,5KB
    …media/roboto-latin-400.a2647ffe.woff2 (localhost) - 769,5ms, 14,5KB

How to async import fonts instead of

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

import 'typeface-roboto'

I tried to implement a method with 'media' attribute and @font-face observer

<link rel="stylesheet" href="fonts.css" media="bogus"/>

but it doesn't work. Also I used a plugin font loader from fontfaceobserver.com

I use version 1.0.0-beta.3 of Material-UI.

How to async load Material ui fonts?

2 Answers