Updated usage of face-font mixins

Author: Nerdy-Girl

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 :bug: Fixed:
 - [Issue #98](https://github.com/7ninjas/scss-mixins/issues/98) included `border-radius` mixins
 - [Issue #100](https://github.com/7ninjas/scss-mixins/issues/100), [Issue #101](https://github.com/7ninjas/scss-mixins/issues/101) changed `$gutter` variable
+- [Issue #103](https://github.com/7ninjas/scss-mixins/issues/103) Updated description of `mixin @font-face` usage along with `css-modules`
 
 ## [v1.0.0] - 2018-04-12
 :rocket: New feature:

docs/fonts.md

@@ -16,17 +16,38 @@ _Specify a font name, URL where it can be found, font weight and font style._
 - `$weight` - defines the boldness of the font. Default value is "normal".
 - `$style` - defines how the font should be styled. Default value is "normal".
 
-### Usage: 
+### Usage:
 
-Define font Poppins from `../fonts` folder. 
+#### Case 1
+
+Define font Poppins from `../fonts` folder.
 
 ```
 @include font-face(Poppins, '../fonts/poppins-v3-latin-ext-500', 500, italic);
 ```
-Each kind of font's file should have the same naming pattern. For example: 
+Each kind of font's file have to have the same naming pattern. For example:
 ```javascript
 poppins-v3-latin-ext-500.eot
 poppins-v3-latin-ext-500.woff
 poppins-v3-latin-ext-500.ttf
 poppins-v3-latin-ext-500.svg
+```
+
+#### Case 2 - **Using mixin along with `css-modules`**
+
+**NOTE:**
+While using `face-font` mixin along with `css-modules` for best optimization you should place it in component which is used in whole application.
+Best place for that is inside scss file for CoreLayout component. Thanks to that it will be imported only once and not in every component.
+It's very important to place it outside of any class declaration.
+
+Define font Graphik from `../fonts` folder.
+```javascript
+@include font-face(Graphik Regular, '../fonts/Graphik-Regular');
+@include font-face(Graphik Light, '../fonts/Graphik-Light');
+@include font-face(Graphik Medium, '../fonts/Graphik-Medium');
+@include font-face(Graphik Semibold, '../fonts/Graphik-Semibold');
+
+.sampleClass {
+...
+}
 ```