materialize: Meteor 1.4: Doesn't load fonts

Put this code into your main.css:

@font-face { font-family: “Roboto”; src: local(Roboto Thin), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Thin.eot”); src: url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Thin.eot?”) format(“embedded-opentype”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Thin.woff2”) format(“woff2”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Thin.woff”) format(“woff”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Thin.ttf”) format(“truetype”); font-weight: 200; }

@font-face { font-family: “Roboto”; src: local(Roboto Light), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Light.eot”); src: url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Light.eot?”) format(“embedded-opentype”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Light.woff2”) format(“woff2”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Light.woff”) format(“woff”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Light.ttf”) format(“truetype”); font-weight: 300; }

@font-face { font-family: “Roboto”; src: local(Roboto Regular), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Regular.eot”); src: url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Regular.eot?”) format(“embedded-opentype”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Regular.woff2”) format(“woff2”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Regular.woff”) format(“woff”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Regular.ttf”) format(“truetype”); font-weight: 400; }

@font-face { font-family: “Roboto”; src: url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Medium.eot”); src: url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Medium.eot?”) format(“embedded-opentype”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Medium.woff2”) format(“woff2”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Medium.woff”) format(“woff”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Medium.ttf”) format(“truetype”); font-weight: 500; }

@font-face { font-family: “Roboto”; src: url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Bold.eot”); src: url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Bold.eot?”) format(“embedded-opentype”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Bold.woff2”) format(“woff2”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Bold.woff”) format(“woff”), url(“packages/materialize_materialize/dist/fonts/roboto/Roboto-Bold.ttf”) format(“truetype”); font-weight: 700; }

Ok, in the meantime I’ve done the following to workaround this issue (because I need the autocomplete feature 😄):

// Temporary workaround for materialize fonts
WebApp.connectHandlers.use("/packages/materialize_materialize/fonts", function (req, res) {
    const url = req.originalUrl.replace("/fonts/", "/dist/fonts/");
    res.statusCode = 301;
    res.setHeader("Location", url);
    res.end();
});

I think the best workaround is this for the moment:

Go into your Meteor project folder and create the following folder:

mkdir -p packages/materialize_materialize/fonts/roboto

Then copy all fonts into it. Everything will work again without modifying any server code.

Didn’t worked in my case @dnish 😦

@polkhovsky The fact that the fonts are bundled but are not loading obviously imply that there is something wrong. My simplest workaround and never fails is to

1. Download the package from the original site (whatever framework it is)
2. Create a fonts folder inside your public folder inside meteor , and include all the respective fonts in sub folders that you wish to get loaded.
3. Locate the import statements inside the css of the framework, in the event you are using google fonts you are provided this.
4. Then use @import statements inside the main.css of your meteor app (located in the root). Please remember not to put in the word “public” in your url as it is not required and nothing would load.

Your fonts will now load fine. At least for the time being while the issue is being fixed, you do not have to stay playing about with packages that should be working but they don’t. I tested it and confirm that this method works fine.

Cheers

@Metrophobe to use the code that @diegonc posted, you have to meteor add webapp and then copy & paste the code into a server file.

Bump