Injects content of font files into stylesheets by replacing the relative url() paths with base64 encoded data.
npm install @fgilde/embed-fontscmd
npm install --save-dev @fgilde/embed-fonts
`
$3
Create a json config file in your structure.
The default filename is embed-fonts.config.json but you can name your file as you want.
If you want to use a different filename you have to specify it with the -config parameter.
example: embed-fonts -config="./yourpath/yourconfigfile.json"
#### Sample config
`json
{
"placeholders": { // Placeholders are optional
"files": ["material-icons.css", "font-awesome.min.css"]
},
"embed-font-files": [
{
"from": "./test-styles/external/{files}",
"to": "./test-styles/external/out_{files}"
}
]
}
`
$3
The command to execute is embed-fonts
To run this script before run build in package.json file, you just add prebuild in script like this:
`json
"scripts": {
"build": "...",
"prebuild": "npm run build-fonts",
"build-fonts": "embed-fonts -config=\"./yourpath/yourconfigfile.json\""
},
`
An example from the input stylesheet:
`css
@font-face {
font-family: 'Test';
src: url(fonts/test.woff) format("woff");
font-weight: 400;
font-style: normal;
}
`
An example from the generated output stylesheet:
`css
@font-face {
font-family: 'Test';
src: url("data:application/font-woff;base64,ZmlsZTgK") format("woff");
font-weight: 400;
font-style: normal;
}
`
$3
Because this tool uses same config as remote-dependencies you can use the same config file for both tools.
And you can use the same placeholders in both tools.
In combination of both tools you can download remote css, and font files and inject them into your stylesheets with fully embedded style.
$3
This tool is very useful if you want to use a css with fonts from a CDN.
In this we use two local files ("material-icons.css", "font-awesome.min.css") with containing local fonts from ./test-styles/external and the Open Sans font from fonts.googleapis.com
`json
{
"placeholders": {
"files": ["material-icons.css", "font-awesome.min.css"]
},
"embed-font-files": [
{
"from": "https://fonts.googleapis.com/css?family=Open+Sans:300,400,700",
"to": "./test-styles/external/my_local_open_sans_with_embedded_fonts.css"
},
{
"from": "./test-styles/external/{files}",
"to": "./test-styles/external/out_{files}"
}
]
}
`
You can also completely use remote files.
Here we create local usable styles for each of material-components-web.min.css, font-awesome.min.css, Material+Icons adn Open+Sans
This produces the 4 output files css_family_open_sans_300_400_700.css, font_awesome_min_css.css, icon_family_material_icons.css, material_components_web_min_css.css
`json
{
"placeholders": {
"localDir": "./test-styles/external",
"files": [
"https://unpkg.com/material-components-web@4.0.0/dist/material-components-web.min.css",
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
"https://fonts.googleapis.com/icon?family=Material+Icons",
"https://fonts.googleapis.com/css?family=Open+Sans:300,400,700"
]
},
"mappings": [
{
"minify": true, // Set this to true to minify the output
"from": "{files}",
"to": "{localDir}"
}
]
}
`
If you dont want to have a file foreach input, you can also bundle all mappings into one file.
`json
{
"placeholders": {
"localDir": "./test-styles/external",
"files": [
"https://unpkg.com/material-components-web@4.0.0/dist/material-components-web.min.css",
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
"https://fonts.googleapis.com/icon?family=Material+Icons",
"https://fonts.googleapis.com/css?family=Open+Sans:300,400,700"
]
},
"bundledOutputFile" : "{localDir}/_all_bundle.css", // bundle all to one file
"mappings": [
{
"minify": true, // Set this to true to minify the output
"from": "{files}"
// dont provide a to, so the output will be bundled into the bundledOutputFile only
}
]
}
``