[SOLVED] Roboto font (npm package) doesn't work


#1

Hi guys,
I installed the Roboto font by npm and imported at the entry-point: import 'typeface-roboto'; but I get these two warnings: “Failed to decode downloaded font” and “OTS parsing error: invalid version tag”. Does the font need to be in /public? How can I fix this?

My stack: Meteor 1.8.0.2 | React 16.0.7 | Material-UI 3.9.1

EDIT: The files loads correctly (Dev tools = Status Code: 200)


#2

Even though you’re getting a code 200 response, you’re not getting the font file (take a look at the preview).
Meteor serves the main html/js bundle for any unknown url so that a router can then take over and render appropriately, so when the browser tries to download a font at ./files/roboto-latin-100.woff2', it gets served the main bundle instead. When the browser then tries to decode the bundle as a font it fails with those two warnings.

To fix this, the fonts do need to be in /public/files/


#3

Not sure why you want to install the Roboto font directly in your app instead of at runtime from a CDN as I don’t think it is the recommended approach with MUI. If you decide to go the CDN route we download using the npm package Web Font Loader to give us more control with this code in our client startup code.

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Roboto:300,400,500']
  }
});

#4

@skirunman Perfectly work. Great, thanks man!

P.S.: I decided to install by npm because it is an option in the MUI docs.