Materialize: Remove Roboto from source and add instructions to obtain it via CDN

[tomscholz]

Having the Roboto font inside the project is making it difficult to use the materialize-css npm package and it is making the repo unnecessary big. About ~1.5mb. Adding a guide how to obtain the font from a CDN or how to include it via @font-face would be the way to go IMO.

I just think this change would make it easier for the user and would save us maintainers time to focus on other problems.

This would be a breaking change

References:
MDC WEB
Material Ui
MDL

[tomscholz]

https://github.com/Dogfalo/materialize/pull/4798

[Dogfalo]

You removed inconsolata

[tomscholz]

Whoops. Btw why do we need it anyway?
For prism.js... Ok adding it back again

[IAMtheIAM]

variables.scss needs to be edited.

$roboto-font-path: "../fonts/roboto/" !default;

Webpack cannot resolve the path to the font if it is loaded at runtime from CDN.

ERROR in ./node_modules/materialize-css/sass/materialize.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/roboto/Roboto-Thin.woff2' in 'C:\Source\frontend\node_modules\materialize-css\sass'

[tomscholz]

@IAMtheIAM I already removed the variable at the corresponding pull request #4798. The $roboto-font-path variable is only required here:

[jorgefuertes]

The fonts doesn't come with bower install, but users haven't been notified. I did detected it when debugging in browser's console. Using version 0.100.0.

Maybe bower related? https://github.com/openseadragon/site-build/issues/166

[foi]

and after that how i can complile roboto as standalone with webpack? manually? I have use materialize-css in local network without internet.

[flexbox]

@foi
You can add Roboto from the CDN here
https://fonts.google.com/?query=roboto&selection.family=Roboto

If you want to keep the font on your project you can download the sources

[IAMtheIAM]

Can I help move this forward in any way?

[gnicol-bzh]

Ok that's why bower/materialize/dist/fonts does not exist anymore when installing Materialize using bower install materialize --save. There is no mention of this breaking change in the doc (http://materializecss.com/getting-started.html).

Adding <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> to our html doesn't solved the problem for css is still looking for Roboto font files in ../fonts/roboto, resulting in awfull delay without any text on page while searching for the fonts.

To be able to import fonts through CDN, I had to remove @import "components/roboto"; from /bower_components/materialize/sass/materialize.scss, which is _not_ a good solution as my co-workers should not have to hack files in Bower folder to install their environment.

I tried what @flexbox suggested: download full Roboto family fonts. But it contains only .ttf font files, and Materialize is looking for .woff files...

To get woff files, I opened https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700 in my browser to see woff files urls.

And get this list (I removed italic and non-latin sets for Materialize does not use them):

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/2tsd397wLxj96qwHyNIkxPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

Now I can download them (or use https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin to do it faster...) and rename them to fit what Materialize expects:

@font-face {
    font-family: "Roboto";
    src: local(Roboto Thin),
        url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
        url("#{$roboto-font-path}Roboto-Thin.woff") format("woff");

    font-weight: 100;
}
@font-face {
    font-family: "Roboto";
    src: local(Roboto Light),
        url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
        url("#{$roboto-font-path}Roboto-Light.woff") format("woff");
    font-weight: 300;
}

@font-face {
    font-family: "Roboto";
    src: local(Roboto Regular), 
        url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
        url("#{$roboto-font-path}Roboto-Regular.woff") format("woff");
    font-weight: 400;
}

@font-face {
    font-family: "Roboto";
    src: local(Roboto Medium),
        url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"),
        url("#{$roboto-font-path}Roboto-Medium.woff") format("woff");
    font-weight: 500;
}

@font-face {
    font-family: "Roboto";
    src: local(Roboto Bold),
        url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"),
        url("#{$roboto-font-path}Roboto-Bold.woff") format("woff");
    font-weight: 700;
}

[IAMtheIAM]

I did something like @gnicol-bzh did and apparently that does work. I was using the remove-roboto branch, but I just tried the main 0.100.2 branch and it works fine. So locally referencing the fonts as he showed above does work.