SamProf
Integrate fonts to deployment and remove internet requirement
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 https://github.com/SamProf/MatBlazor/pull/610#issuecomment-656661152
@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": "[email protected]",
"destination": "wwwroot/roboto-fontface-material/"
},
{
"library": "[email protected]",
"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"
]
}
]
}
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"
