feat(fonts): add Lyon font

The Lyon font files are stored in /assets/fonts and ommitted from the distributed package using the following Webpack changes.

1. The `css-loader` options prevent it from transforming any URL referencing the Lyon font. This means the path will stay as relative to the base URL of the consuming application (/assets/fonts), therefore looking in the assets directory of consuming app
2. Removes the Lyon font files from the /dist directory after compliation is complete, using `remove-files-webpack-plugin`.

docs/CONTRIBUTING.md

@@ -123,3 +123,15 @@ To add a new SVG icon to Canopy simply add the file to either the `icons` or `br
 When committing the new icons [lint-staged](https://github.com/okonet/lint-staged) will run and generate all the `ts` files automatically.
 
 After that remember to add the new icons to the story, as they are not automatically added at present.
+
+
+## Fonts
+
+The Roboto font is stored in **/projects/canopy/src/assets/fonts/roboto** as normal and is included in the distributed Canopy package.
+
+The Lyon font files are stored in **/assets/fonts** and ommitted from the distributed package using the following Webpack changes.
+
+1. The `css-loader` options prevent it from transforming any URL referencing the Lyon font. This means the path will stay as relative to the base URL of the consuming application (/assets/fonts), therefore looking in the assets directory of consuming app
+2. Removes the Lyon font files from the /dist directory after compilation is complete, using `remove-files-webpack-plugin`.
+
+For more info, see the fonts section in USAGE.md.

docs/USAGE.md

@@ -111,6 +111,32 @@ You can find the scss files here:
 - dist/styles/variables - containing all the variables for colors, typography, etc
 - dist/lib - containing all the components styles
 
+### Canopy Fonts
+
+Canopy consists of two fonts; Roboto and Lyon. Roboto is included in the distributed Canopy package, and will load automatically when you have installed Canopy correctly.
+
+Due to commercial licensing agreements the Lyon font is not included in the distributed package. You will need to manually add it to the **assets** directory of your application. Canopy does provide the css to work with the font and no additional code should be required. You will  need to ensure the font is in the directory specified by Canopy.
+
+Canopy's path for Lyon is **/assets/fonts/lyon/**, therefore you need to put the font files in the following location:
+
+```bash
+my-app/
+  src/
+    assets/
+      fonts/
+        lyon/
+          lyon-display-regular.woff
+          lyon-display-regular.woff2
+          lyon-display-bold.woff
+          lyon-display-bold.woff2
+```
+
+> This will result in the font being served in your app like this: <br>http://my-app.landg.com/assets/fonts/lyon/LyonDisplay-Regular-Web.woff2
+
+When you include the canopy.css file in your project, it will try to load the font from that exact path. If your font files are in the wrong location, or have a typo in the filename, the Lyon font won't load correctly.
+
+Please ensure you have the correct licensing agreement in place before using the Lyon font in your application.
+
 ### Supporting IE11
 
 Canopy uses css variables which are not supported by IE11. One way of adding support is to use [css-vars-ponyfill](https://www.npmjs.com/package/css-vars-ponyfill) in the following way.