Integrate fonts to deployment and remove internet requirement

[SamProf]

Look at
https://github.com/SamProf/MatBlazor/blob/master/src/MatBlazor/wwwroot/dist/matBlazor.css

You are referencing https://fonts.googleapis.com.

I would consider it a requirement.
These fonts are generated based on the client that is requesting them. It is not a trivial task of just downloading a font file.

Originally posted by @rokx in #610 (comment)

[damianog]

@SamProf , this feature is foundamental on an isolated service from internet.
Maybe you could only add an "offline" version of the style ex: "matBlazorOffline.css" without importing the one from internet and let the final user to embed the one he need.
Actually I embed the roboto fonts and material design icons with libman.json file on the root of my web project:

{
  "version": "1.0",
  "defaultProvider": "unpkg",
  "libraries": [
    {
      "library": "roboto-fontface-material@0.1.0",
      "destination": "wwwroot/roboto-fontface-material/"
    },
    {
      "library": "material-design-icons-iconfont@6.1.0",
      "destination": "wwwroot/material-design-icons-iconfont/",
      "files": [
        "dist/LICENSE",
        "dist/material-design-icons.css",
        "dist/material-design-icons.css.map",
        "dist/fonts/MaterialIcons-Regular.eot",
        "dist/fonts/MaterialIcons-Regular.json",
        "dist/fonts/MaterialIcons-Regular.ttf",
        "dist/fonts/MaterialIcons-Regular.woff",
        "dist/fonts/MaterialIcons-Regular.woff2"
      ]
    }
  ]
}

[bihe]

A rather simple "solution" is to download dist/matBlazor.css and remove the two lines

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

and reference the "changed" css.

<link href="css/matBlazor.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" /> <!-- custom styles -->

My site.css contains the definitions to use the local fonts

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* material icons */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Material-Icons-Regular.woff2') format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

I've downloaded Google fonts with help of google-fonts-helper and Material Icons using this trick.

Resulting in "local traffic"

[samerios]

Hi what about this feature?