@festo-ui/web-essentials 3.1.0 → 3.2.1-pre-20220624.1

package/README.md

@@ -36,22 +36,39 @@ Installing the libraries is very easy. Just use this command to install the Web
 If you just need the static CSS resources then you can find them inside the `dist` directory.
 
 Import the css like this:
- ```css
- ...
- @import '~@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css'
- ...
- ```
+
+```css
+... @import '~@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css' ...;
+```
 
 ### Using the SCSS variables in your project
+
 If you want to use the variables (color or more) from the web essentials library, you can add the scss resources.
 
-You'll find them inside the directory ``node_modules/@festo-ui/web-essentials/scss``.
+You'll find them inside the directory `node_modules/@festo-ui/web-essentials/scss`.
+
+You can use the variables like this:
+`example.scss`
+
+```scss
+@import '~@festo-ui/web-essentials/scss/variables';
+
+background: $hero; // background is carul now
+@extend .fwe-icon-menu-close; // add the menu-close icon as ::before element
+```
+
+## Using Web Essentials with local fonts
 
- You can use the variables like this:
- ``example.scss``
- ```scss
- @import '~@festo-ui/web-essentials/scss/variables';
+If you want to use Web Essentials in an __offline__ environment, you have to provide local files for the MetaPro font.
+* Download the required fonts here: https://festo.sharepoint.com/sites/tggfw/SitePages/Font-Richtlinie.aspx
+* Override the css variable for the font: 
+```scss
+@font-face {
+  font-family: "localMeta";
+  src: url("../src/fonts/MetaChinese.woff") format("woff"), url("../src/fonts/MetaChinese.woff2") format("woff2");
+}
 
- background: $hero; // background is carul now
- @extend .fwe-icon-menu-close // add the menu-close icon as ::before element
- ```
+:root {
+    --fwe-font-family-sans-serif: "localMeta";
+}
+```